React的虚拟DOM

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