浏览器渲染流程

浏览器渲染流程

每个浏览器的渲染流程并不相同，以下webkit为例，主要包括以下五步：

1、浏览器将获取的HTML文档解析成DOM树。
2、处理css标签、样式，构成层叠样式表模型CSSOM（CSS Object Model）。
3、将DOM和CSSOM合并为渲染树（rander tree）,代表一系列将被渲染的对象。
4、渲染树（rander tree）的每个元素包括的内容都是计算过得，被称为布局（layout）。
5、将渲染树（rander tree）的各个节点绘制到屏幕上，这一步被称为绘制（panting）。

具体流程:

一、构建DOM树（DOM Tree）
① DOM树在构建的过程中可能会被css和js的加载而执行阻塞。
② display:none;的元素也会在DOM树中。
③ 注释也会在DOM树中。
④ script标签会在DOM树中。

二、构建CSSDOM规则树（CSSOM Rule Tree）
① CSS解析可以与DOM解析同时进行。
② CSS解析与script的执行互斥（如：死循环）。
③ 在webkit内核中进行script执行优化，只有在js访问css时才会发生互斥。

三、构建渲染树（Rander Tree）
① Rander Tree 和DOM Tree 不完全对应。
② display：none；的元素不在Rander Tree中。
③ visibility：hidden；的元素在Rander Tree中。

四、渲染树布局（Layout Of The Rander Tree）
① float元素，absolute元素、fixed元素会发生位置偏移。
② 脱离文档流——脱离渲染树（Rander Tree）。

五、渲染树绘制（Painting The Rander Tree）

reflow（回流）:

定义：当浏览器布局发生变化时，需要重新渲染，这个过程叫做reflow（回流）。
会引起reflow的操作：
① 页面第一次渲染（初始化）。
② DOM树变化（如：增删节点）。
③ Render Tree变化（如：margin改变）。
④ 浏览器窗口重置（resize）。
⑤ 获取元素的某些属性（如：getComputedStyle()）。

repaint（重绘）:

定义：改变元素某些属性时不影响周围或布局的属性时，屏幕的一部分要重绘，但元素的几何尺寸和位置没发生变化。
关于引起repaint：回流必引起重绘，但重绘不一定引起回流。重绘可以单独触发。如：字体颜色，背景颜色等。（注：字体大小改变会触发回流）
注：display：none；的元素触发回流； visibility：hidden；的元素触发重绘。

减少 reflow（回流）及repaint（重绘）的触发次数：

① 避免逐个改变节点样式，尽量一次修改。
② 避免多次读取某些属性。
③ 用transform 做形状改变和位移改变。
④ 使用document。createDocumentFragment () 将需要添加的元素添加进去，在一次性用append()或appendChild()添加进去。
⑤ 通过绝对位移将复杂的节点元素脱离文档流。
⑥ 可以将需要多次修改的DOM元素设置 display：none；，操作完再显示。