重绘和回流

[sihai00]

定义

重绘：不影响布局的改变（color、background-color等等）
回流：影响布局的改变（border、padding、margin等等）

回流必定会发生重绘，重绘不一定会引发回流

浏览器优化

浏览器通过维护队列，一定时间（1000 / 60 = 16.6ms）内执行更新，清空队列。为了获取最新的值，以下属性会让浏览器的强制提前更新，导致渲染，也就触发回流。

• offsetTop、offsetLeft、offsetWidth、offsetHeight
• scrollTop、scrollLeft、scrollWidth、scrollHeight
• clientTop、clientLeft、clientWidth、clientHeight
• width、height
• getComputedStyle()
• getBoundingClientRect()

减少重绘和回流

对于css

1. 避免table
2. 多条css修改变为单个class修改
3. 动画脱离文档流（position：absolute或fixed）
4. css3硬件加速

对于js

1. 避免频繁操作dom
2. 合并多次dom操作
3. 缓存dom值

参考

介绍下重绘和回流（Repaint & Reflow），以及如何进行优化