javascript - DOM 和 Virtual DOM 在内存中是如何表示的？

Question

有什么区别，为什么访问 Virtual DOM 比访问 DOM 更快？

Answer 1

有什么不同

虚拟 DOM是真实 DOM 元素的任何内存表示。

它是对真实 HTML DOM的抽象，抽象级别根据您希望在虚拟 DOM中保留多少细节而有所不同。

通常，首先对内存中的对象进行更改，然后再通过真实的 HTML DOM页面进行渲染。

为什么访问 Virtual DOM 比访问 DOM 更快？

虚拟 DOM已经在内存中，另一方面，必须从页面访问真实 DOM并将其加载到内存中以进行任何操作。

简单示例

假设您要呈现一个简单的项目列表，并且您只关心每个列表项目的以下属性

• 背景颜色
• 显示值
• 字体大小和颜色
• 对齐（左对齐、居中或右对齐）

由于只有这些属性对您的功能很重要，因此您需要一个数据结构来存储这些

var listObj = {
   "properties" : {
      "background-color" : "#ccc"
   },
   "children" : [
      {
         "properties" : { "value" : "item-a", "font-size" : "12px", "color" : "red", "h-align" : "left" }
      },
      {
         "properties" : { "value" : "item-b", "font-size" : "12px", "color" : "red", "h-align" : "left" }
      },
      {
         "properties" : { "value" : "item-c", "font-size" : "12px", "color" : "red", "h-align" : "left" }
      }
   ],
   removeItem : function( item ){ /* Logic to remove an item and render the udpated list */ },
   addItem : function( item ){ /* Logic to add an item and render the udpated list */ },
   renderList : function(){ /* Logic to render the udpated list */ }
};

现在，请注意listObj只有有限数量的属性和方法来呈现和操作列表。

只需要函数调用，抽象出相对复杂的任务，如渲染列表、删除项目等。

相对更复杂的例子

类似地，考虑一个通用表单对象，它包含支持不同类型控件（如标签、输入框、选择框等）的属性，包括特定于这些不同控件中的每一个的属性，例如选择框可能具有数据源（可能是一个ajax调用）。

为了表示操作它们所需的这些属性和方法，将需要更复杂的数据结构，例如

var genericFormObj = {
  "name" : "",
  "action" : "",
  "form-attributes" : [
      {
         "order-of-display" : 1, "type" : "label", "value" : "" , "id" : ""
      },
      {
         "order-of-display" : 2, "type" : "textbox", "value" : ""  , "id" : ""
      }
   ]
}