回流和重绘

回流必将引起重绘，重绘不一定会引起回流。

回流

当 渲染树 中部分或全部元素的尺寸、结构、或某些属性发生改变时，浏览器重新渲染部分或全部文档的过程称为回流。

• 页面首次渲染
• 浏览器窗口大小变化
• 元素内容、尺寸、位置、字体大小变化
• 激活 css 伪类
• 查询某些属性或调用某些方法
• 添加或删除可见的 DOM 元素

重绘

当页面的某些元素的样式发生变化，不会影响在文档流中的位置时，浏览器会对元素进行重新绘制。

• color、 background 相关属性： background-color、 background-image…
• outline 相关属性
• visibility 、border-radius 、box-shadow

如何避免回流和重绘？

1. 操作 DOM 时，尽量在低层次的 DOM 节点进行操作
2. 不要使用 table 布局，一个小的改动可能会使整个 table 进行重新布局
3. 使用 css 的表达式
4. 不要频繁操作元素的样式，
5. 可以先将元素设为display:none,然后再显示出来。
6. 元素的多个操作批处理
7. 使用absolute或 fixed 使元素脱离文档流，这样子他们发生变化不会影响其他元素。