"2019-02-24 回答 虚拟 DOM(VDOM)是使用 JavaScript 普通对象来描述真实 DOM 的展现方式。这些对象具有描述真实 DOM 节点的属性,比如:节点名称,他的属性和子节点。 0 - + 上面的 DOM 元素使用虚拟 DOM 可以如下进行表示: { nodeName: 'div', attr .."

虚拟 DOM 是什么,库或者框架中为什么要使用他?

2019-02-24

回答

虚拟 DOM(VDOM)是使用 JavaScript 普通对象来描述真实 DOM 的展现方式。这些对象具有描述真实 DOM 节点的属性,比如:节点名称,他的属性和子节点。

<div class="counter">
  <h1>0</h1>
  <button>-</button>
  <button>+</button>
</div> 

上面的 DOM 元素使用虚拟 DOM 可以如下进行表示:

{
  nodeName: "div",
  attributes: { class: "counter" },
  children: [
    {
      nodeName: "h1",
      attributes: {},
      children: [0]
    },
    {
      nodeName: "button",
      attributes: {},
      children: ["-"]
    },
    {
      nodeName: "button",
      attributes: {},
      children: ["+"]
    }
  ]
} 

库或者框架中使用虚拟 DOM 主要为了提高性能。当应用程序的状态发生变化时,真实 DOM 需要进行及时更新以表示出其变化。然而,修改真实 DOM 节点与重新计算虚拟 DOM 相比需要更高的成本。前一个虚拟 DOM 和新的虚拟 DOM 进行对比可以非常的快。

旧的虚拟 DOM 和新的虚拟 DOM 之间一旦有变化,就可以通过框架中的比对引擎计算出来。真实的 DOM 就可以在最短的事件内快速的进行差异更新以匹配应用程序中最新的状态。

加分回答

返回总目录

每天 30 秒

  • 30Seconds

    精选的常见前端问题集,帮助您踏踏实实走好每一步。

    英文原文请看 30-seconds

    164 引用 • 204 回帖 • 3 关注
  • JavaScript

    JavaScript 一种动态类型、弱类型、基于原型的直译式脚本语言,内置支持类型。它的解释器被称为 JavaScript 引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在 HTML 网页上使用,用来给 HTML 网页增加动态功能。

    371 引用 • 983 回帖 • 993 关注
  • 面试

    面试造航母,上班拧螺丝。多面试,少加班。

    209 引用 • 1144 回帖 • 454 关注
感谢    关注    收藏    赞同    反对    举报    分享
回帖    
请输入回帖内容...