vlambda博客
学习文章列表

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

答案:

虚拟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)