重绘（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样式修改（减少样式计算次数）。// 差：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%的重排重绘性能问题，优先落地即可大幅提升页面流畅度。
