DOM和虚拟DOM如何在内存中表示? [英] How is DOM and Virtual DOM represented in memory?

问题描述

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

What's the difference, why is it faster to access Virtual DOM than just DOM?

推荐答案

有什么区别

虚拟DOM 是真实DOM元素在内存中的任何表示形式.

这是对真实HTML DOM 的抽象，抽象级别根据您要在虚拟DOM 的不同而不同>.

It is an abstraction over the real HTML DOM and the level of abstraction varies based on how much details you want to keep in virtual DOM.

通常，首先对内存中的对象进行更改，然后再通过真实的HTML DOM 页面将其呈现给对象.

Usually, first the changes are made to in-memory objects before rendering the same to via real HTML DOM page.

为什么访问虚拟DOM比仅访问DOM更快?

why is it faster to access Virtual DOM than just DOM?

虚拟DOM 已已在内存中，另一方面，真实DOM 必须从页面访问并加载到内存中才能进行任何操作.

Virtual DOM is already in memory, on the other hand real DOM has to be accessed from page and loaded to memory for any operation.

简单示例

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

Lets say you want to render a simple list of items, and only following properties of each list item is of concern to you

• 背景色
• 显示值
• 字体大小和颜色
• 对齐方式(左，中或右对齐)

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

Since only these properties matter to your feature, you need a data structure to store these

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 仅具有有限数量的属性和方法来呈现和处理列表.

Now, notice that listObj has only limited number of properties and methods to render and manipulate the list.

仅需要函数调用，抽象了相对复杂的任务，例如呈现列表，删除项目等.

Only function invocation is required, relatively complex task like rendering the list, removing an item, etc are abstracted.

相对较复杂的示例

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

Similarly, think of a generic form object which contains properties to support different kind of controls like label, input boxes, select boxes, etc including properties specific to each of these different controls such as a select-box may have source of data (which could be an ajax call).

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

To represent such properties and methods required to manipulate them, would require more elaborate data-structure, for example

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

这篇关于DOM和虚拟DOM如何在内存中表示?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！