重排（回流）与重绘

页面显示过程

• 解析 HTML生成 DOM 树
• 解析 CSS 生成 CSSOM 树
• 解析JS 更新 DOM 树和 CSSOM 树
• DOM 树+CSSOM 树生成渲染树
• 布局(也称回流,确定个节点显示的位置
• 渲染绘制

更新 DOM 或 Style

• 可能会导致局部重排(也称回流,重新布局)
• 可能会导致局部重绘

注意:

• 重排肯定会重绘,但重绘不一定有重排
• 重排比重绘开销更大,更消耗性能

哪些操作会导致重排

• 浏览器窗口尺寸改变
• 元素位置和尺寸发生改变的时候
• 新增和删除可见元素
• 内容发生改变 (文字数量或图片大小等等)
• 元素字体大小变化。
• 激活 CSS 伪类 (例如: :hover)
• 设置 style 属性
• 查询某些属性。比如说:
• offsetTop 、offsetLeft 、offsetWidth 、offsetHeight 、scrollTop 、scrollLeft 、scrollWidthscrollHeight、clientTop、clientLeft、clientWidth、clientHeight

哪些操作会导致重绘

• 更新元素的部分属性(影响元素的外观，风格，而不会影响布局)，比如 visibility、outline、背景色等属性的改变

例子代码：

如何减少重排次数

• 更新节点的样式， 尽量通过类名而不是通过style来更新 
• 分离样式的读定操作，不要将读写操作混合调用
• 将DOM操作离线处理，比如使用DocumentFragment