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

本贴最后更新于 610 天前,其中的信息可能已经渤澥桑田

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

    📙 前端知识精选集,包含 HTML、CSS、JavaScript、React、Node、安全等方面,每天仅需 30 秒。

    • 精选常见面试题,帮助您准备下一次面试
    • 精选常见交互,帮助您拥有简洁酷炫的站点
    • 精选有用的 React 片段,帮助你获取最佳实践
    • 精选常见代码集,帮助您提高打码效率
    • 整理前端界的最新资讯,邀您一同探索新世界
    488 引用 • 379 回帖 • 4 关注
  • JavaScript

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

    670 引用 • 1132 回帖 • 748 关注
  • 面试

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

    273 引用 • 1355 回帖 • 189 关注

赞助商 我要投放

欢迎来到这里!

我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。

注册 关于
请输入回帖内容 ...