浏览器页面的回流与重绘
定义
- 回流：浏览器根据各种样式属性，计算盒子的大小与位置。
- 重绘：当计算好一个盒子的大小、位置及其他属性后，浏览器会在页面中绘制这个盒子。
- 解析HTML，生成DOM树，解析CSS，生成CSSOM树
- 将DOM树和CSSOM树结合，生成渲染树(Render Tree)
- Layout(回流):根据生成的渲染树，进行回流(Layout)，得到节点的几何信息（位置，大小）
- Painting(重绘):根据渲染树以及回流得到的几何信息，得到节点的绝对像素
- Display:将像素发送给GPU，展示在页面上
触发回流
当一个盒子需要重新计算大小及位置的时候，就需要触发回流机制，常见的情形如下：
- 添加或删除可见的DOM元素
- 元素的位置发生变化
- 元素的尺寸发生变化（包括外边距、内边框、边框大小、高度和宽度等）
- 内容发生变化，比如文本变化或图片被另一个不同尺寸的图片所替代
- 页面一开始渲染的时候（这避免不了）
- 浏览器的窗口尺寸变化（因为回流是根据视口的大小来计算元素的位置和大小的）
触发重绘
当一个盒子触发回流机制之后，就一定会触发重绘，那么除此之外，还有哪些情形会触发重绘？
- 颜色的修改
- 文本方向的修改
- 阴影的修改
浏览器的优化机制
由于每次重排都会造成额外的计算消耗，因此大多数浏览器都会通过队列化修改并批量执行来优化重排过程。浏览器会将修改操作放入到队列里，直到过了一段时间或者操作达到了一个阈值，才清空队列
当你获取布局信息的操作的时候，会强制队列刷新。
