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 的代价
欢迎来到这里!
我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。
注册 关于