回流（重排）与重绘
回流，页面元素的形状大小位置等几何信息改变时，触发回流
重绘，页面的颜色、阴影等信息改变时，触发重绘
回流必定重绘
浏览器渲染机制
浏览器页面渲染机制
- 解析HTML生成DOM树
- 解析CSS生成CSSOM树
- 将DOM树和CSSOM树结合生成渲染树
- 根据渲染树进行回流，得到节点的几何信息（位置大小等）
- 根据渲染树和回流得到的几何信息进行重绘，得到节点的颜色等信息
- 展示在页面上
回流的触发：
- 首次加载时触发，不可避免
- 添加、删除、移动可见节点
- 改变节点大小
- 窗口大小改变
- 内容改变
重绘的触发：
- 颜色、阴影等改变
- 发生回流
浏览器的优化机制
由于回流会消耗额外的资源，所以大多数浏览器都使用队列来存储回流的信息，只有当进行某些操作或者达到阈值时，才会清空队列，执行回流和重绘
减少回流
- 减少行内样式的使用，尽量使用类名来添加样式
- 避免table布局的使用，table布局的改动会导致整个布局的回流
- 对于复杂的动画等，尽量使用fixed或absolute脱离文档流，减少对其他节点的影响
- 避免使用CSS表达式（expression）
网友评论