首页 > 代码库 > React的虚拟DOM

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

React的虚拟DOM