虚拟 DOM

本质是保存节点信息、属性和内容的一个 JS 对象，通过虚拟 DOM 和 diff 算法得出一些需要修改的最小单位，再更新视图，减少 DOM 操作提高性能

虚拟 DOM 和真实 DOM 的区别

• 虚拟 DOM 不会进行排版与重绘操作，而真实 DOM 会频繁重排与重绘

• 虚拟 DOM 的总损耗是“虚拟 DOM 增删改+真实 DOM 差异增删改+排版与重绘”，真实 DOM 的总损耗是“真实 DOM 完全增删改+排版与重绘”

虚拟 DOM 和真实 DOM 的优缺点

真实 DOM

优点：

• 易用

缺点：

• 效率低，解析速度慢，内存占用量过高

• 性能差：频繁操作真实 DOM，易于导致重绘与回流

虚拟 DOM

优点：

• 简单方便：如果使用手动操作真实 DOM 来完成页面，繁琐又容易出错，在大规模应用下维护起来也很困难

• 性能方面：使用 Virtual DOM，能够有效避免真实 DOM 数频繁更新，减少多次引起重绘与回流，提高性能

缺点：

• 在一些性能要求极高的应用中虚拟 DOM 无法进行针对性的极致优化

• 首次渲染大量 DOM 时，由于多了一层虚拟 DOM 的计算，速度比正常稍慢

为什么虚拟 DOM 可以提高性能

由于框架不知道数据与界面的一一对应关系，如果数据变了就直接重新渲染整个页面将引发严重的效率问题。为减少对真实 dom 无意义的操作，框架引入了虚拟 dom。虚拟 dom 是一个表示界面渲染信息的 JavaScript 对象，而查找 js 对象的属性变化要比查询真实 dom 树的性能开销小，当数据发生变化时，框架会重新构建一棵新的虚拟 dom 树，通过对比新旧两棵虚拟 dom 树，找出差异节点，再应用到相应的真实 dom 中进行更新，也能避免了没必要更新的真实 dom 被重复渲染，从而提高了性能。(如果问虚拟 dom 的作用，还要再加一个：框架通过虚拟 dom 建立了一个抽象层，用一套虚拟 dom，可以对接不同平台的渲染逻辑，实现一次编码多端运行）