虚拟DOM

120 阅读2分钟

vdom是虚拟DOM(Virtual DOM)的简称,指的是用JS模拟的DOM结构,将DOM变化的对比放在JS层来做。换而言之,vdom就是JS对象。

本质上 Virtual DOM 对应的是一个 JavaScript 对象,它描述的是视图和应用状态之间的一种映射关系,是某一时刻真实 DOM 状态的内存映射

为什么要使用vDom

由于 JS 是可操纵 DOM 的,如果在修改这些元素属性同时渲染界面(即 JS 线程和渲染线程同时运行),那么渲染线程前后获得的元素数据就可能不一致了。因此为了防止渲染出现不可预期的结果,浏览器设置 渲染线程 与 JS 引擎线程 为互斥的关系,当 JS 引擎执行时渲染线程会被挂起,GUI 更新则会被保存在一个队列中等到 JS 引擎线程空闲时立即被执行。

因此我们在操作 DOM 时,任何 DOM API 调用都要先将 JS 数据结构转为 DOM 数据结构,再挂起 JS 引擎线程并启动渲染引擎线程,执行过后再把可能的返回值反转数据结构,重启 JS 引擎继续执行。这种两个线程之间的上下文切换势必会很耗性能。

另外很多 DOM API 的读写都涉及页面布局的 重绘(repaint)和回流(reflow),这会更加的耗费性能。

综上所述,单次 DOM API 调用性能就不够好,频繁调用就会迅速积累上述损耗,但我们又不可能不去操作 DOM,因此解决问题的本质是要 减少不必要的 DOM API 调用。

Virtual DOM的优势

为函数式的 UI 编程方式打开了大门,我们不需要再去考虑具体 DOM 的操作,框架已经替我们做了,我们就可以用更加声明式的方式书写代码。 减少页面渲染的次数,提高渲染效率。 提供了更好的跨平台的能力,因为 virtual DOM 是以 JavaScript 对象为基础而不依赖具体的平台环境,因此可以适用于其他的平台,如 node、weex、native 等。