前端经典面试题合集, 什么是回流和重绘?什么场景下会触发?怎么减少回流和重绘?

Step 1

Q:: 什么是回流和重绘？

A:: 回流（Reflow）是指当渲染树中的一部分（或整个）因为元素的尺寸、布局、隐藏等变化而需要重新计算几何属性的过程。重绘（Repaint）是指当元素的外观发生改变但不影响布局时，浏览器会将改变后的元素重新绘制出来的过程，例如改变背景颜色、文字颜色等。

Step 2

Q:: 什么场景下会触发回流和重绘？

A:: 回流会在以下情况下触发：添加或删除可见的DOM元素、元素尺寸变化（包括边距、填充、边框等）、内容变化（例如文本数量或大小）、浏览器窗口尺寸变化等。重绘会在以下情况下触发：元素外观样式变化（例如颜色、背景图片等），但不影响布局的变化。

Step 3

Q:: 怎么减少回流和重绘？

A:: 减少回流和重绘的方法包括：使用CSS类进行批量样式修改而不是逐个修改；避免频繁操作DOM，尽量使用文档片段（DocumentFragment）进行批量更新；避免使用表格布局，因为表格的单一元素改变可能导致整个表格的重新布局；将动画效果应用到position属性为fixed或absolute的元素上；避免在布局信息改变时查询和使用offset、scroll等属性；使用虚拟DOM的库如React等。