页面渲染过程，重绘与回流

一.页面的渲染过程

 

1.处理html标记并构建DOM树

DOM节点树中节点与HTML文档中内容一一对应，DOM树构建过程:读取HTML文档，将字节转化成字符，确定tokens，

再将tokens转化成节点，以节点构建DOM树。

2.处理CSS标记并构建CSSOM树

在构建DOM树的过程中，在HTML文档的head标签里遇到link标签，该标签引用了一个外部css样式表，由于预见到需要利用css资源来渲染页面，浏览器会立即发出对该css资源的请求，并进行CSSOM树的构建。

CSSOM树的构建过程与DOM树的构建过程一致：读取CSS文档，将字节转换成字符，确定token，再将token转换成节点，以节点构建CSSOM树

3.将DOM和CSSOM合并成一个渲染树

DOM+CSSOM=渲染树，渲染树由DOM树，CSSOM树合并而成，但并不是必须等CSSOM树加载完成后才开始加载合并构建渲染树，三者的构建并无先后条件，亦并非相互独立，而是会有交叉，并行构建，因此会出现一边加载，一边解析，一边渲染的工作现象。

4.根据渲染树来布局，以计算每个节点的几何信息。

5.将各个节点绘制到屏幕上

 二、重绘与回流

重绘（repaint）：

屏幕的一部分要进行重绘，渲染树的节点发生改变，但不改变该节点在页面当中的位置和大小，譬如某个div节点的字体颜色，背景颜色等发生改变，但是该div的标签节点的宽、高、内外边距不发生变化，此时出发浏览器重绘。

重排（reflow）：

也称回流。当渲染树的节点发生变化，如该节点的几何属性(宽高、内外边距、或是float、position、display:none;等等)导致该节点位置发生变化，此刻触发浏览器重排，需要重新生成渲染树。

重排一定会引起重绘，重绘不一定引起重排。

何时引起重排？

当页面布局和集合属性改变时就需要重排。

• 添加或删除可见的DOM元素
• 元素位置发生改变：display、float、position、overflow等等
• 元素尺寸发生改变：宽高、边距、填充、边框
• 内容改变：如文本或图片改变导致的计算值的宽高改变
• 页面渲染初始化
• 浏览器窗口尺寸发生改变--resize事件发生。

如何优化渲染效率?

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

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

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

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

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

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