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

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

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 就可以在最短的事件内快速的进行差异更新以匹配应用程序中最新的状态。

加分回答

  • 使用虚拟 DOM 可以减少对底层的 DOM 操作,这样采用声明式编程可以编程过程更加简洁直观。
  • 虚拟 DOM 可以将同一时间内多个状态的变化累计计算出最终状态,以便对 DOM 只执行一次更新。
  • 下图可以说明更新 DOM 的代价
    image.png

返回总目录

每天 30 秒

  • 30Seconds

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

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

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

    710 引用 • 1173 回帖 • 199 关注
  • 面试

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

    324 引用 • 1395 回帖 • 1 关注

相关帖子

欢迎来到这里!

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

注册 关于
请输入回帖内容 ...
Vanessa
我们终此一生,就是要摆脱他人的期待,找到真正的自己。 昆明