回流与重绘

重绘：对 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等属性，使用前把他们存起来

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

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。