回流是元素几何变化时的重新布局，重绘是外观变化时的重新绘制，回流必触发重绘。频繁DOM操作、样式修改、读取offset等属性会触发回流重绘。优化方式包括：批量修改class、使用DocumentFragment、缓存布局信息、避免强制刷新、用transform/opacity做动画，并合理使用will-change提示浏览器，从而提升渲染性能。
在JavaScript前端开发中，页面的渲染性能直接影响用户体验。其中，重绘（Repaint）与回流（Reflow）是影响性能的关键因素。理解它们的触发机制并进行合理优化，能显著提升页面响应速度。
什么是重绘与回流？
回流（Reflow）：当页面中元素的几何属性（如宽高、位置、布局等）发生变化时，浏览器需要重新计算元素的位置和大小，并重新构建渲染树。这个过程称为回流。回流会消耗大量计算资源，尤其是涉及整个页面的布局变动时。
重绘（Repaint）：当元素的外观发生变化但不影响布局时（如颜色、背景、可见性），浏览器只需重新绘制该部分像素，而无需重新计算布局。重绘开销小于回流，但仍会影响性能。
需要注意的是：回流一定会触发重绘，但重绘不一定触发回流。
立即学习“Java免费学习笔记（深入）”；
哪些操作会触发回流和重绘？
以下常见操作会引发回流或重绘：
- 添加或删除可见DOM元素
- 修改元素的几何属性（如 width、height、margin、padding、top、left 等）
- 改变窗口大小（resize事件）
- 读取某些元素属性（如 offsetTop、offsetWidth、getComputedStyle 等）可能强制浏览器刷新队列，触发回流
- 改变字体或内容（文本变化导致布局变化）
- 激活CSS伪类（如 :hover）
如何减少回流与重绘？
优化目标是尽量减少回流次数，并将多个操作合并处理。
- 避免频繁操作样式：不要在循环中直接修改元素样式，应通过修改 class 来批量更新样式。
- 使用 DocumentFragment 或离线DOM：对多个DOM节点的操作，可先在内存中完成（如使用 DocumentFragment），再一次性插入文档。
- 将 DOM 操作“缓存”后批量执行：例如，先隐藏元素（display: none），完成一系列修改后再显示，隐藏期间的改动不会触发回流。
- 避免频繁读取布局信息：如需获取 offsetWidth 等属性，应缓存结果，避免重复访问。
- 使用 transform 和 opacity 实现动画：这两个属性由合成层（compositor）处理，不会触发回流或重绘，性能更优。
- 使用 CSS 的 will-change 属性提示浏览器：对即将发生变换的元素提前告知浏览器，有助于优化渲染流程。
利用浏览器的异步机制
浏览器会将多个DOM修改合并为一次回流。但如果你在脚本中穿插读取布局属性，可能会强制刷新渲染队列。
例如：
let el = document.getElementById('box');el.style.width = '200px';
console.log(el.offsetWidth); // 强制回流
el.style.height = '300px'; // 再次触发回流
应改为：
el.style.width = '200px';el.style.height = '300px';
console.log(el.offsetWidth); // 只触发一次回流
基本上就这些。理解重绘与回流的本质，避免不必要的DOM操作，合理利用浏览器渲染机制，就能有效提升JavaScript应用的视觉流畅度。不复杂但容易忽略。
