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

Question

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

Answer 1

What's the difference

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

它是对真实 HTML DOM 的抽象，并且抽象级别因您希望在虚拟 DOM 中保留多少细节而异>.

通常，在通过真正的 HTML DOM 页面呈现之前，首先对内存中的对象进行更改。

why is it faster to access Virtual DOM than just 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" : ""
      }
   ]
}