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

Step 1

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

A:: 回流（Reflow）是当渲染树中的一部分（或全部）因为元素的尺寸、布局、隐藏等改变而需要重新构建。重绘（Repaint）是指当元素外观发生改变（如颜色、背景图片等）但不影响布局时，浏览器会重新绘制受影响的部分。

Step 2

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

A:: 回流触发场景包括：添加或删除可见的DOM元素、元素尺寸或位置变化、内容变化（如输入文本）、浏览器窗口尺寸变化等。重绘触发场景包括：改变元素的颜色、背景图片、文字颜色等外观属性。

Step 3

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

A:: 减少回流和重绘的方法包括：避免逐个修改DOM样式，使用CSS类批量修改；避免频繁读取会引发回流/重绘的属性，如offsetHeight、scrollTop等；使用文档片段（DocumentFragment）批量更新DOM；使用CSS3硬件加速（如transform、opacity等）来减少影响。