浏览器渲染机制
- 解析html代码，构建DOM树（包含整个页面节点的层级）。
- 解析css代码，构建CSSOM(CSS Object Model,CSS对象模型)
- 合并DOM树和CSSOM，生成render渲染树。
- 根据render渲染树进行布局
- 调用GPU对渲染树进行绘制，合成图层展示。(最耗时，主要优化点)
tips：
- 其中JS脚本（script标签）会阻塞间隙，所以将脚本放在网页尾部会加速渲染。
- 可以通过优化重绘和回流来减少响应的页面的渲染时间。
回流和重绘
重绘是当节点需要更改外观而不会影响布局的，比如改变 color 就叫称为重绘
回流是布局或者几何属性需要改变就称为回流。
回流必定会发生重绘，重绘不一定会引发回流。回流所需的成本比重绘高的多，改变深层次的节点很可能导致父节点的一系列回流
元素样式改变 会导致重绘 元素大小或者位置改变会导致回流
常见触发回流
- 添加或删除可见的DOM元素
- 元素尺寸改变——边距、填充、边框、宽度和高度
- 内容变化，比如用户在input框中输入文字
- 浏览器窗口尺寸改变——resize事件发生时
- 元素尺寸改变——边距、填充、边框、宽度和高度
- 设置其他style属性的值