React篇(010)-为什么虚拟 dom 会提高性能?

Posted 2021-03-29 前端面试秘籍

答案：

虚拟dom(virtual dom) 其实就是一个javascript对象，通过这个JavaScript对象来描述真实dom。

真实dom：以前没有虚拟dom，如果需要比较两个页面的差异，我们需要通过对真实dom进行比对。真实dom节点是非常复杂的，它里面会绑定的事件，它会有属性，背后会有各种方法，会频繁触发重排与重绘，所以两个真实dom比对，非常耗性能。

总损耗 = 真实DOM完全增删改 + （可能较多的节点）重排与重绘

虚拟dom：相当于在js和真实dom中间加了一个缓存，利用dom diff算法避免了没有必要的dom操作，从而提髙性能。

总损耗 = 虚拟DOM增删改 + （与Diff算法效率有关）真实DOM差异增删改 + （较少的节点）重排与重绘

具体实现步骤如下：

1. 用JavaScript对象结构表示DOM树的结构；然后用这个树构建一个真正的DOM树，插到文档当中;
2. 当状态变更的时候，重新构造一棵新的对象树。然后用新的树和旧的树进行比较，记录两棵树差异;
3. 把步骤2所记录的差异应用到步骤1所构建的真正的DOM树上，视图就更新了。

[参与互动](https://github.com/yisainan/web-interview/issues/505)