React的虚拟DOM

Posted 2020-08-08 xixi

ReactJs的一大特点就是引进了虚拟dom（Virtual DOM）的概念。为什么我们需要Virtual DOM，Virtual DOM给我们带来了什么优势。

首先我们要了解一下浏览器的工作流。

当我们从一个服务拿到请求的html时，浏览器会怎么办？

（1）创建DOM树

一旦浏览器收到html文件后，渲染引擎（render engine）就开始解析它，并根据HTML元素（elements）一一对应地生成DOM 节点（nodes），组成一棵DOM树。

（2）创建渲染树

同时，浏览器也会解析来自外部CSS文件和元素上的inline样式。通常浏览器会为这些样式信息，连同包含样式信息的DOM树上的节点，再创建另外一个树，一般被称作渲染树（render tree）。

（3）Layout布局

又被简称为Reflow。构造了渲染树以后，浏览器引擎开始着手布局（layout）。布局时，渲染树上的每个节点根据其在屏幕上应该出现的精确位置，分配一组屏幕坐标值。

（4）绘制 Painting

接着，浏览器将会通过遍历渲染树，调用每个节点的paint方法来绘制这些render对象。paint方法根据浏览器平台，使用不同的UI后端API（agnostic UI backend API）。 通过绘制，最终将在屏幕上展示内容。

 

我们知道，当页面的结构布局发生变化时，浏览器就要去重新渲染，这就是回流。每次浏览器的重新渲染都会都会花时间，如果频繁的操作dom结构，可能会引起不好的用户体验。

React的虚拟dom，对此的一个优化，简单点来说就是，将多次的DOM操作，合成一次操作，减少了reflow的次数。

 

DOM 操作 真正的问题在于每次操作都会触发布局的改变、DOM树的修改和渲染。所以，当你一个接一个地去修改30个节点的时候，就会引起30次（潜在的）布局重算，30次（潜在的）重绘，等等。

Virtual DOM 实际上没有使用什么全新的技术，仅仅是把 “ 双缓冲（double buffering）” 技术应用到了DOM上面。 这样一来，当你在这个单独的虚拟的DOM树上也一个接一个地修改30个节点的时候，它不会每次都去触发重绘，所以修改节点的开销就变小了。 之后，一旦你要把这些改动传递给真实DOM，之前所有的改动就会整合成一次DOM操作。这一次DOM操作引起的布局计算和重绘可能会更大，但是相比而言，整合起来的改动只做一次，减少了（多次）计算。

不过，实际上不借助Virtual DOM也可以做到这一点。你可以自己手动地整合所有的DOM操作到一个DOM 碎片（DOM fragment） 里，然后再传递给DOM树。

 

 

——————————————————

原文链接：http://mp.weixin.qq.com/s?__biz=MzI0ODA2ODU2NQ==&mid=2651130413&idx=1&sn=56a1cc3ac225a09982fc0c4a508222c7&chksm=f257ca97c5204381b559763f4af839ab72eda009c47b0f0a4d47492852b87211c601dee8987a&scene=23&srcid=0910yHpjoNTORi3itDTKNRfu#rd