回流与重绘

回流（重排）与重绘

回流，页面元素的形状大小位置等几何信息改变时，触发回流
重绘，页面的颜色、阴影等信息改变时，触发重绘

回流必定重绘

浏览器渲染机制

浏览器页面渲染机制

1. 解析HTML生成DOM树
2. 解析CSS生成CSSOM树
3. 将DOM树和CSSOM树结合生成渲染树
4. 根据渲染树进行回流，得到节点的几何信息（位置大小等）
5. 根据渲染树和回流得到的几何信息进行重绘，得到节点的颜色等信息
6. 展示在页面上

回流的触发：

1. 首次加载时触发，不可避免
2. 添加、删除、移动可见节点
3. 改变节点大小
4. 窗口大小改变
5. 内容改变

重绘的触发：

1. 颜色、阴影等改变
2. 发生回流

浏览器的优化机制

由于回流会消耗额外的资源，所以大多数浏览器都使用队列来存储回流的信息，只有当进行某些操作或者达到阈值时，才会清空队列，执行回流和重绘

减少回流

1. 减少行内样式的使用，尽量使用类名来添加样式
2. 避免table布局的使用，table布局的改动会导致整个布局的回流
3. 对于复杂的动画等，尽量使用fixed或absolute脱离文档流，减少对其他节点的影响
4. 避免使用CSS表达式（expression）