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

重绘（Repaint）

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

重排（Reflow）

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

核心差异

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

性能优化关键

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

一、核心优化原则

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

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

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

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

  // 差：3次样式修改可能触发多次重排dom.style.width='100px';dom.style.height='200px';dom.style.margin='10px';// 好：1次class切换，仅触发1次重排dom.classList.add('target-style');

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

  // 方案1：隐藏元素（display: none）后操作dom.style.display='none';dom.innerHTML+='<div>新内容</div>';// 批量增删DOMdom.style.display='block';// 方案2：用DocumentFragment临时存储DOMconstfragment=document.createDocumentFragment();for(leti=0;i<100;i++){constdiv=document.createElement('div');fragment.appendChild(div);// 操作片段不触发重排}dom.appendChild(fragment);// 仅插入时触发1次重排

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

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

// 差：读取→修改→读取，触发多次强制同步布局for(leti=0;i<doms.length;i++){constwidth=doms[i].offsetWidth;// 读取布局（触发布局计算）doms[i].style.width=`${width+10}px`;// 修改样式}// 好：先批量读取，再批量修改constwidths=[];// 1. 批量读取（仅触发1次布局计算）for(leti=0;i<doms.length;i++){widths.push(doms[i].offsetWidth);}// 2. 批量修改（仅触发1次重排）for(leti=0;i<doms.length;i++){doms[i].style.width=`${widths[i]+10}px`;}

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

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

/* 差：修改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（防抖）限制执行频率，减少重排次数。

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

三、总结

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