浏览器的渲染机制

浏览器渲染机制

1. 解析html代码，构建DOM树（包含整个页面节点的层级）。
2. 解析css代码，构建CSSOM(CSS Object Model,CSS对象模型)
3. 合并DOM树和CSSOM，生成render渲染树。
4. 根据render渲染树进行布局
5. 调用GPU对渲染树进行绘制，合成图层展示。(最耗时，主要优化点)

tips：

• 其中JS脚本（script标签）会阻塞间隙，所以将脚本放在网页尾部会加速渲染。
• 可以通过优化重绘和回流来减少响应的页面的渲染时间。

回流和重绘

重绘是当节点需要更改外观而不会影响布局的，比如改变 color 就叫称为重绘

回流是布局或者几何属性需要改变就称为回流。

回流必定会发生重绘，重绘不一定会引发回流。回流所需的成本比重绘高的多，改变深层次的节点很可能导致父节点的一系列回流
元素样式改变 会导致重绘 元素大小或者位置改变会导致回流

常见触发回流

• 添加或删除可见的DOM元素
• 元素尺寸改变——边距、填充、边框、宽度和高度
• 内容变化，比如用户在input框中输入文字
• 浏览器窗口尺寸改变——resize事件发生时
• 元素尺寸改变——边距、填充、边框、宽度和高度
• 设置其他style属性的值