本文共 850 字，大约阅读时间需要 2 分钟。

回流：

触发条件：当对 DOM 结构的修改引发 DOM 几何尺寸变化的时候，会发生回流的过程。回流过程：由于DOM的结构发生了改变，所以需要从生成DOM这一步开始，重新经过样式计算、生成布局树、建立图层树、再到生成绘制列表以及之后的显示器显示这整一个渲染过程走一遍，开销是非常大的。例如以下操作会触发回流： （1）一个 DOM 元素的几何属性变化，常见的几何属性有width、height、padding、margin、left、top、border 等等, 这个很好理解。 （2）使 DOM 节点发生增减或者移动。 （3）读写 offset族、scroll族和client族属性的时候，浏览器为了获取这些值，需要进行回流操作。 （4）调用 window.getComputedStyle 方法。

重绘：

触发条件：当 DOM 的修改导致了样式的变化，并且没有影响几何属性的时候，会导致重绘(repaint)。重绘过程：由于没有导致 DOM 几何属性的变化，因此元素的位置信息不需要更新，所以当发生重绘的时候，会跳过生成布局树和建立图层树的阶段，直接到生成绘制列表，然后继续进行分块、生成位图等后面一系列操作。

如何避免触发回流和重绘：

（1）避免频繁使用 style，而是采用修改class的方式。 （2）将动画效果应用到position属性为absolute或fixed的元素上。 （3）也可以先为元素设置display: none，操作结束后再把它显示出来。因为在display属性为none的元素上进行的DOM操作不会引发回流和重绘 （4）使用createDocumentFragment进行批量的 DOM 操作。 （5）对于 resize、scroll 等进行防抖/节流处理。 （6）避免频繁读取会引发回流/重绘的属性，如果确实需要多次使用，就用一个变量缓存起来。 （7）利用 CSS3 的transform、opacity、filter这些属性可以实现合成的效果，也就是GPU加速。

转载地址：https://blog.csdn.net/yyychocolate/article/details/108033471 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！