回流与重绘

回流与重绘

重绘 ：对 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()

---

减少回流重绘

减少DOM的操作

利用class替换样式

尽可能在DOM树的最末端改变class

避免设置多项内联样式

使用trsansform

避免使用table布局

操作display:none元素，最终显示出来

避免重复读取offsetLeft等属性，使用前把他们存起来

绝对定位具有复杂动画的元素