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

Question

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

Answer 1

What's the difference

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

它是对 真实 HTML DOM 的抽象， 抽象级别因您想要的详细程度而异将 保留在 虚拟 DOM.

中

通常，首先对内存中的对象进行更改，然后再通过 real 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 只有有限数量的 属性和方法 来呈现和操作列表。

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

相对复杂的例子

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

要表示这些属性和操作它们所需的方法，需要更精细的数据结构，例如

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

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

How is DOM and Virtual DOM represented in memory?

html

javascript

dom

virtual-dom