回流与重绘

什么是回流与重绘

重绘：对 DOM 操作简单修改样式（比如修改元素的 visibility、color、background-color 等）、却并未影响页面布局时，浏览器不需重新计算元素的位置尺寸等，直接为该元素绘制新的样式。这个过程叫做重绘。

回流：对 DOM 操作导致 DOM 尺寸等属性的变化（比如修改元素的 width、height、top）时，浏览器需要重新计算元素的属性，然后再将计算的结果绘制出来，这个过程叫做回流。

常见的导致回流的操作：

• 页面首次加载
• 浏览器窗口尺寸改变
• 元素尺寸或位置改变
• 元素内容变化
• 元素字体大小变化
• 增删 DOM 元素
• 查询或调用某些特定属性方法

浏览器优化

现代浏览器会把一系列的操作放进队列机制来批量更新布局，至少一个浏览器刷新帧 16ms（即大多数显示屏幕的刷新率为 60Hz,一个刷新间隔为 1000ms/60）才会清空队列。

如下操作浏览器会强制清空队列，触发回流与重绘：

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

减少回流重绘

• 利用class替换样式
• 尽可能在DOM树的最末端改变class
• 避免设置多项内联样式
• 使用trsansform
• 避免使用table布局
• 操作display:none元素，最终显示出来
• 避免重复读取offsetLeft等属性，使用前把他们存起来
• 绝对定位具有复杂动画的元素