关键渲染路径
网页在浏览器中渲染的过程叫做关键渲染路径。
渲染过程
- DOM树：HTML被解析成DOM（Document Object Model）树。
- CSSOM树：CSS解析成CSSOM（CSS Object Model）树。
- Render Tree：DOM树和CSSOM树结合，可见节点组成渲染树Render Tree。
- ReFlow回流：从渲染树根节点遍历，根据设备视口（viewport）计算节点的大小和位置。
- RePaint重绘：根据渲染树和回流得到的节点信息（大小和位置）转换成像素，传给GPU进行渲染。
回流和重绘发生的条件
- 新增和删除可见的节点
- 元素的位置发生变化
- 元素的大小发生变化
- 元素的内容发生变化，例如内容增加，图片尺寸增大等
- 页面初始渲染
- 浏览器的视口发生变化
回流一定会导致重绘，而重绘不一定会有回流。
浏览器的优化
关于元素的变化会先将变化存储到队列中，当到达一定时间/阈值后，才会清空队列，并一次性进行更改。但是如果要获取元素的信息时，会强制清空队列。
- offsetTop\offsetLeft\offsetWidth\offsetHeight
- scrollTop\scrollLeft\scrollWidth\scrollHeight
- clientTop\clientLeft\clientWidht\clientHeight
- ...还有很多
回流和重绘优化
- 将多次的dom和样式更改合并为一次（效果不明显，因为有浏览器优化）
- 将元素隐藏，更改，再显示（因为仅对可见节点进行回流/重绘，效果不明显，因为有浏览器优化）
- 对于多次获取同个元素的信息时，可以先将值存储起来，避免浏览器多次清空队列。
参考文档：
