重绘和重排怎么触发？怎么优化？

重绘（Repaint）

定义：元素样式改变但不影响布局时触发，仅重新绘制元素外观，不改变DOM几何结构。
常见场景：修改color、background-color、opacity、box-shadow等。

重排（Reflow）

定义：元素几何属性改变（尺寸/位置/数量） 时触发，浏览器需重新计算DOM布局并渲染，性能消耗远大于重绘。
常见场景：修改width、height、margin、padding、display，或DOM增删、窗口resize。

核心差异

性能消耗：重排 > 重排（重排必触发重绘，重绘不一定触发重排）。
触发原因：重排是布局改变，重绘是外观改变。
影响范围：重排可能连锁影响父/子元素布局，重绘仅影响当前元素。

性能优化关键

批量修改样式（用class代替inline样式）。
避免频繁操作DOM，优先用文档片段DocumentFragment。
复杂动画用transform（GPU加速，仅触发合成层，不重排重绘）。

一、核心优化原则

重排性能消耗远大于重绘，优化核心是 减少重排触发频率 + 缩小重排影响范围，优先规避高频布局操作。

二、落地优化方案（按优先级排序）

1. 批量操作DOM/样式，避免高频单次修改

样式批量处理 ：用class统一切换样式，替代多次inline样式修改（减少样式计算次数）。

javascript 复制代码

// 差：3次样式修改可能触发多次重排
dom.style.width = '100px';
dom.style.height = '200px';
dom.style.margin = '10px';

// 好：1次class切换，仅触发1次重排
dom.classList.add('target-style');

DOM批量操作 ：先脱离文档流再修改，最后重新插入（避免修改时频繁触发布局计算）。

javascript 复制代码

// 方案1：隐藏元素（display: none）后操作
dom.style.display = 'none';
dom.innerHTML += '<div>新内容</div>'; // 批量增删DOM
dom.style.display = 'block';

// 方案2：用DocumentFragment临时存储DOM
const fragment = document.createDocumentFragment();
for (let i = 0; i < 100; i++) {
  const div = document.createElement('div');
  fragment.appendChild(div); // 操作片段不触发重排
}
dom.appendChild(fragment); // 仅插入时触发1次重排

2. 避免触发"强制同步布局"

浏览器默认异步计算布局，若先读取布局属性（如offsetWidth、scrollTop）再修改样式，会强制浏览器立即计算布局，导致性能卡顿，需 先批量修改，再批量读取。

javascript 复制代码

// 差：读取→修改→读取，触发多次强制同步布局
for (let i = 0; i < doms.length; i++) {
  const width = doms[i].offsetWidth; // 读取布局（触发布局计算）
  doms[i].style.width = `${width + 10}px`; // 修改样式
}

// 好：先批量读取，再批量修改
const widths = [];
// 1. 批量读取（仅触发1次布局计算）
for (let i = 0; i < doms.length; i++) {
  widths.push(doms[i].offsetWidth);
}
// 2. 批量修改（仅触发1次重排）
for (let i = 0; i < doms.length; i++) {
  doms[i].style.width = `${widths[i] + 10}px`;
}

3. 复杂动画/交互用GPU加速，规避重排重绘

用transform、opacity实现动画，浏览器会将元素放入独立合成层，仅触发合成操作（无重排、无重绘，性能最优），替代width、margin、top等布局属性。

css 复制代码

/* 差：修改top触发频繁重排 */
.animate-bad {
  position: absolute;
  top: 0;
  transition: top 0.3s;
}
.animate-bad:hover { top: 10px; }

/* 好：transform仅触发合成，GPU加速 */
.animate-good {
  transition: transform 0.3s;
}
.animate-good:hover { transform: translateY(10px); }

4. 缩小重排影响范围

用position: absolute/fixed脱离文档流，元素修改仅影响自身，不连锁触发父/兄弟元素重排。
避免嵌套过深的DOM结构，层级越深，重排计算范围越大。

5. 其他实用优化

避免频繁查询布局属性（offsetWidth、clientHeight等），缓存查询结果复用。

窗口resize、滚动事件等高频触发场景，用debounce（防抖）限制执行频率，减少重排次数。

javascript 复制代码

// 滚动事件防抖，100ms内仅执行1次
let timer = null;
window.addEventListener('scroll', () => {
  clearTimeout(timer);
  timer = setTimeout(() => {
    const scrollTop = document.documentElement.scrollTop; // 避免高频读取
    // 业务逻辑
  }, 100);
});

三、总结

高频优化动作：批量操作DOM/样式 + 动画用transform/opacity + 规避强制同步布局，这3点可解决80%的重排重绘性能问题，优先落地即可大幅提升页面流畅度。