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只有有限数量的属性和方法来呈现和操作列表。

只需要进行函数调用，抽象列表，删除项目等相对复杂的任务是抽象的。

相对更复杂的例子

同样，考虑一个泛型表单对象，它包含支持不同类型控件的属性，如标签，输入框，选择框等，包括特定于每个不同控件的属性< / em>如选择框可能有数据源（可能是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如何在内存中表示？

1 个答案: