一、Reflow和Repaint核心原理
- Reflow（布局重计算）：当DOM结构或样式改变影响元素几何属性（如尺寸、位置）时触发，浏览器重新计算布局树。
- Repaint（重绘）：仅当元素外观（如颜色、背景）改变且不影响布局时触发，浏览器重新绘制元素。
- 性能影响：Reflow比Repaint耗时3-5倍，频繁触发会导致页面卡顿。
二、减少Reflow的优化策略
2.1 批量操作DOM
// ❌ 低效：循环中频繁插入DOM const list = document.getElementById('list'); for (let i = 0; i < 1000; i++) { const li = document.createElement('li'); li.textContent = `Item ${i}`; list.appendChild(li); // 每次循环触发Reflow } // ✅ 高效：DocumentFragment批量插入 const fragment = document.createDocumentFragment(); for (let i = 0; i < 1000; i++) { const li = document.createElement('li'); li.textContent = `Item ${i}`; fragment.appendChild(li); // 内存中操作 } list.appendChild(fragment); // 仅一次Reflow2.2 读写分离
// ❌ 低效：循环中交替读取和修改 for (let i = 0; i < 1000; i++) { const width = element.offsetWidth; // 触发Reflow element.style.width = width + 10 + 'px'; // 再次触发 } // ✅ 高效：先读取后修改 const width = element.offsetWidth; // 读取一次 for (let i = 0; i < 1000; i++) { element.style.width = width + 10 + 'px'; // 批量修改 }2.3 隐藏DOM再操作
// ✅ 高效：隐藏DOM再操作 element.style.display = 'none'; // 触发一次Reflow // 执行大量DOM操作 element.style.display = 'block'; // 再次触发一次三、减少Repaint的优化策略
3.1 批量修改样式
// ❌ 低效：逐行修改样式 element.style.color = 'red'; element.style.backgroundColor = 'blue'; // ✅ 高效：使用class或style.cssText element.className = 'new-style'; // 一次性修改3.2 避免强制同步布局
// ❌ 低效：读取布局属性 const width = element.offsetWidth; // 触发Reflow element.style.width = width + 10 + 'px'; // 再次触发 // ✅ 高效：分离读取和写入 const width = element.offsetWidth; // 读取 element.style.width = width + 10 + 'px'; // 写入3.3 使用transform代替top/left
// ✅ 高效：使用transform element.style.transform = 'translate(100px, 50px)'; // 不触发Reflow四、高级优化技巧
4.1 使用requestAnimationFrame
// ✅ 高效：动画循环 function animate() { // 动画代码 requestAnimationFrame(animate); }4.2 使用Web Workers
// 主线程 const worker = new Worker('worker.js'); worker.postMessage(data); worker.onmessage = (e) => { // 处理结果 }; // worker.js self.onmessage = (e) => { const result = heavyComputation(e.data); self.postMessage(result); };五、性能检测工具
5.1 Chrome DevTools性能面板
- 打开DevTools (F12)
- 切换到"Performance"标签
- 点击录制按钮开始分析
- 查看"Main"线程中的"Layout"和"Paint"事件
5.2 性能API
const start = performance.now(); // 执行代码 const end = performance.now(); console.log(`Execution time: ${end - start}ms`);六、实战案例分析
案例1：列表渲染优化
// ✅ 高效：DocumentFragment批量插入 function renderList(items) { const list = document.getElementById('list'); const fragment = document.createDocumentFragment(); items.forEach(item => { const li = document.createElement('li'); li.textContent = item; fragment.appendChild(li); }); list.appendChild(fragment); // 仅一次Reflow }案例2：动画性能优化
// ✅ 高效：requestAnimationFrame function moveElement(element) { let pos = 0; const animate = () => { element.style.transform = `translateX(${pos}px)`; pos += 10; if (pos <= 500) requestAnimationFrame(animate); }; requestAnimationFrame(animate); }通过实施这些优化策略，可以显著提升JavaScript应用的性能，特别是在处理大量DOM操作时。记住，性能优化是一个持续的过程，需要不断测试和调整以获得最佳效果。
