重排（Reflow，又称回流）是浏览器重新计算元素布局（尺寸、位置、结构等）的过程，性能消耗较高，尤其是页面元素较多时，频繁重排会导致页面卡顿。减少重排次数的核心思路是合并布局操作、避免不必要的布局计算、隔离布局变化范围，具体策略如下：
一、批量修改布局样式，避免单次零散操作
浏览器会维护一个“渲染队列”，将多个连续的样式修改合并为一次重排。但如果零散地修改布局属性（如 width、margin 等），可能打破队列，导致多次重排。批量操作可将多次重排合并为一次。
1. 用 class 一次性切换布局样式
将需要修改的布局属性（如尺寸、位置）定义在一个 CSS 类中，通过添加/移除类实现批量更新，仅触发一次重排：
/* 定义布局样式类 */
.expanded {
width: 300px;
height: 200px;
margin: 20px;
padding: 10px;
}
// 优化前：多次单独修改（可能触发多次重排）
element.style.width = "300px";
element.style.height = "200px";
element.style.margin = "20px";
// 优化后：一次类切换（仅一次重排）
element.classList.add("expanded");
2. 离线修改 DOM（脱离文档流后操作）
先将元素从文档流中移除（此时修改布局不会触发重排），批量修改后再重新插入，仅触发一次重排。常用方法：
隐藏元素（
display: none）：element.style.display = "none"; // 脱离文档流，不触发重排 // 批量修改布局属性（无重排） element.style.width = "300px"; element.style.height = "200px"; element.style.margin = "20px"; element.style.display = "block"; // 重新插入，触发一次重排使用文档片段（
DocumentFragment）：
对于动态添加多个子元素的场景，先用文档片段暂存，最后一次性插入 DOM，避免多次重排：const fragment = document.createDocumentFragment(); // 向片段中添加多个子元素（不触发重排） for (let i = 0; i < 10; i++) { const child = document.createElement("div"); child.style.width = "100px"; // 离线修改，无重排 fragment.appendChild(child); } // 一次性插入 DOM（仅触发一次重排） parent.appendChild(fragment);
二、避免“强制同步布局”（读取布局属性后立即修改）
浏览器为了优化性能，会延迟重排（等待队列中的样式修改累积后再执行）。但如果在修改布局属性前读取布局相关属性（如 offsetWidth、getBoundingClientRect() 等），浏览器会强制触发重排以获取最新值，导致后续修改再次触发重排，形成“强制同步布局”，增加重排次数。
反例（触发多次重排）：
// 错误：先读取布局属性（强制重排），再修改（再次重排）
for (let i = 0; i < 10; i++) {
// 读取布局属性：强制触发重排
const width = element.offsetWidth;
// 修改布局属性：再次触发重排
element.style.width = `${
width + 10}px`;
}
// 结果：触发 20 次重排（10 次读取+10 次修改）
优化（合并读取和修改，仅触发 2 次重排）：
// 步骤1：先批量读取所有需要的布局属性（触发 1 次重排）
const widths = [];
for (let i = 0; i < 10; i++) {
widths.push(element.offsetWidth); // 仅触发 1 次重排（浏览器缓存结果）
}
// 步骤2：再批量修改布局属性（触发 1 次重排）
for (let i = 0; i < 10; i++) {
element.style.width = `${
widths[i] + 10}px`;
}
// 结果：仅触发 2 次重排
三、使用“脱离文档流”的元素，减少重排影响范围
元素在文档流中时，其布局变化可能会连锁影响其他元素（如相邻元素位置偏移），导致大面积重排。而脱离文档流的元素（position: absolute 或 fixed）的布局变化仅影响自身，重排成本极低。
适用场景：
- 动画元素（如弹窗、悬浮层）
- 高频更新布局的元素（如倒计时、进度条）
示例：
/* 脱离文档流，布局变化不影响其他元素 */
.animated-box {
position: absolute; /* 或 fixed */
top: 50px;
left: 50px;
}
修改这类元素的 top、left 等属性时，仅自身重排，不会影响其他元素。
四、减少对“布局敏感”元素的操作
页面中某些元素的重排会“牵一发而动全身”（如 body、html 或包含大量子元素的容器），因为它们的布局变化会触发所有子元素的重排。应尽量减少对这类元素的直接布局修改。
优化策略：
- 将高频更新的元素独立为小容器（如用
absolute包裹），避免嵌套在大容器中。 - 复杂布局中，拆分大型容器为多个小型容器，限制重排范围。
五、利用 CSS 特性减少布局计算
1. 用 transform 替代布局属性实现位移/缩放
transform（如 translate、scale）由 GPU 处理，不会触发重排，仅触发低开销的“合成”操作。适合动画场景：
/* 优化前：修改 left 触发重排（动画中每秒60次） */
.box {
transition: left 0.3s;
}
.box:hover {
left: 100px; /* 每次变化都触发重排 */
}
/* 优化后：transform 无重排 */
.box {
transition: transform 0.3s;
}
.box:hover {
transform: translateX(100px); /* GPU 处理，无重排 */
}
2. 使用 contain: layout 隔离布局变化
contain: layout 告诉浏览器：元素内部的布局变化不会影响外部，从而限制重排范围（仅重排元素自身）：
.card {
contain: layout; /* 内部布局变化仅重排自身，不影响父元素 */
}
适合独立组件（如卡片、列表项），避免内部变化引发全局重排。
六、避免触发重排的高频操作
- 避免频繁查询布局属性：如
offsetWidth、clientHeight、getBoundingClientRect()等，尽量缓存结果。 - 优化窗口事件：
resize、scroll等事件会高频触发，若在事件中修改布局，需用节流（throttle） 限制执行频率：// 节流：每隔 100ms 执行一次，减少重排次数 let lastResizeTime = 0; window.addEventListener("resize", () => { const now = Date.now(); if (now - lastResizeTime > 100) { element.style.width = `${ window.innerWidth / 2}px`; // 仅每 100ms 重排一次 lastResizeTime = now; } });
七、工具检测重排次数
使用 Chrome 开发者工具定位重排问题：
- 打开开发者工具（F12），切换到「Performance」面板。
- 点击「Record」按钮，操作页面（如触发动画、滚动）。
- 停止录制后，查看「Main」线程中的「Layout」事件：
- 若「Layout」频繁出现且耗时较长，说明存在重排问题。
- 鼠标悬停在「Layout」事件上，可查看重排的元素和耗时。
总结
减少重排次数的核心策略：
- 批量操作：用
class或离线 DOM 合并多次布局修改，仅触发一次重排。 - 避免强制同步布局：先批量读取布局属性，再批量修改。
- 隔离范围：用
absolute/fixed或contain: layout限制重排影响。 - 替代方案：用
transform实现动画，避免修改布局属性。
通过这些方法，可显著减少重排次数，提升页面流畅度，尤其对复杂页面和动画场景效果明显。
