页面渲染流程及回流重绘

DOM/CSSOM/Render Tree：

Dom树就是html结构，里面包含所有的html tag（也包含用js生成的）。

CSSOM 样式结构体，浏览器把所有样式(主要包括css和浏览器自带的样式设置)解析成样式结构体，在解析的过程中会去掉浏览器不能识别的样式。

将DOM和CSSOM组合构建以后形成Render Tree。

Webkit引擎的渲染流程

大致分为：

1. 解析HTML文件，构建DOM Tree；

2. 解析CSS，构建CSSOM tree（css规则树）；

3. 将DOM tree和CSSOM Tree合并，构建Render tree（渲染树）；

4. 布局render树（Layout/reflow），负责各元素尺寸、位置的计算；

5. 绘制render树（paint），绘制页面像素信息。

构建DOM树->构建CSSDOM->构建渲染树->布局->绘制

不一定是一次性顺序完成，实际情况中，js和css中的某些操作都会多次修改DOM和CSSOM，此时都会进行重新渲染；因为有时js也会参与DOM树的构建，所以会先执行js再构建渲染树，所以js脚本会阻塞Render tree的构建，即阻塞页面渲染（所以需要把script脚本放在body后）。

上面提到的 布局->绘制部分：

布局阶段会从渲染树的根节点开始遍历，渲染树的每个节点都是一个Render Object对象，包含宽高，位置，背景色等样式信息。布局阶段的输出就是我们常说的盒子模型，float元素，absoulte元素，fixed元素会发生位置偏移。

我们常说的脱离文档流，其实就是脱离Render Tree。

在绘制阶段，浏览器会遍历渲染树，调用渲染器的paint()方法在屏幕上显示其内容。渲染树的绘制工作是由浏览器的UI后端组件完成的。

重排（回流）和重绘：

HTML默认是流式布局的，但CSS和JS会打破这种布局，改变DOM的外观样式以及大小和位置。产生重绘和重排；

重绘repaint：渲染树节点发生改变，但不影响该节点在页面当中的空间位置及大小。

重排reflow：也称回流，渲染树节点发生改变，影响了节点的几何属性，导致节点位置发生变化，此时触发浏览器重排（reflow），需要重新生成渲染树。

回流一定重绘，重绘不一定回流。

引起重排（回流）：

1. 页面首次渲染；

2. 元素尺寸改变——边距、填充、边框、宽度和高度；

3. 元素位置改变——display、float、position、overflow等等；

4. 内容改变——比如文本改变或者图片大小改变而引起的计算值宽度和高度改变；

5. 操作DOM时，添加或删除可见的DOM元素；

如何优化渲染效率?

1. 合法的书写HTML和CSS，且不要忘记文档编码类型。

2. 样式文件应放在 head 标签中，脚本文件放在body结束前，这样可以防止阻塞方式。

3. 简化并优化 css 选择器，尽量将嵌套层减小到最少。

4. 尽量减少 Javascript 中进行DOM操作。

5. 修改元素样式时，更改其class属性是性能最高的方法。

6. 尽量用transform来做形变和位移。