重绘

当改变元素的外观时不触发布局更新，只触发样式计算和绘制。

• color

• background-color

重排（回流）

当浏览器必须重新处理和绘制部分或全部页面时，回流就会发生。

• 页面初始渲染

• 添加或删除可见 DOM

• 改变元素位置

• 改变元素尺寸（width、height、margin、border）

• 改变元素内容（文本变化或图片大小的变化）

• 改变窗口尺寸

• 读取这些属性

  • offsetTop/Left/Width/Height

  • clientTop/Left/Width/Height

  • scrollTop/Left/Width/Height

  • getComputedStyle/currentStyle

  • width/height

重绘和重排的关系

重绘不会引起重排，但重排一定会引起重绘，一个元素的重排通常会带来一系列的反应，甚至触发 整个页面的重排和重绘，性能代价是高昂的。

重排优化

• 浏览器自身的渲染队列机制，发现某一行要修改元素样式，不立即渲染，而是看下一行，如果 下一行也会改变样式，则把修改样式的操作放到渲染队列中，再往下看，等到一定数量或一定 时间间隔再再整体渲染一次，引发一次重绘/重排。

• 将多次改变样式属性的操作合并成一次操作，使用类名或 cssText。

• 如果要批量添加 DOM，使用 fragment 或 HTMLStr。

• 将需要多次重排的元素（如开启动画的元素），position 属性设为 absolute 或 fixed 或 sticky 脱离了文档流。

• 由于 display 属性为 none的 元素不在 Render Tree 中，如果要对一个元素进行复杂的操作 时，可以先隐藏它，操作完成后再显示。这样只触发两次重排。

• 缓存布局信息，由于读取布局信息会导致回流，因此用变量保存这些信息避免之后不必要的回流。