当前位置：首页 > article >正文

JavaScript 性能优化实战研讨

article 2025/8/23 20:50:45

核心优化方向

执行效率：减少主线程阻塞
内存管理：避免泄漏和过度消耗
加载性能：加快解析与执行速度
渲染优化：减少布局重排与重绘

🔥 关键优化策略与代码示例

1️⃣ 减少重排(Reflow)与重绘(Repaint)

// 避免逐行修改样式
const el = document.getElementById('box');// ❌ 错误方式（多次重排）
el.style.width = '100px';
el.style.height = '50px';
el.style.margin = '10px';// ✅ 正确方式（单次重排）
el.style.cssText = 'width:100px; height:50px; margin:10px;';// ✅ 使用class切换
el.classList.add('active-style');

2️⃣ 事件委托优化

// ❌ 每个按钮绑定监听器
document.querySelectorAll('.btn').forEach(btn => {btn.addEventListener('click', handleClick);
});// ✅ 事件委托（单个监听器）
document.body.addEventListener('click', e => {if (e.target.classList.contains('btn')) {handleClick(e);}
});

3️⃣ 防抖与节流

// 防抖（最后一次触发后执行）
function debounce(func, delay = 300) {let timer;return (...args) => {clearTimeout(timer);timer = setTimeout(() => func.apply(this, args), delay);};
}// 节流（固定间隔执行）
function throttle(func, limit = 300) {let lastRun;return (...args) => {if (!lastRun) {func.apply(this, args);lastRun = Date.now();} else {clearTimeout(timer);const timer = setTimeout(() => {if (Date.now() - lastRun >= limit) {func.apply(this, args);lastRun = Date.now();}}, limit - (Date.now() - lastRun));}};
}// 使用示例
window.addEventListener('resize', throttle(calculateLayout, 200));

4️⃣ 异步任务优化

// ✅ 使用 requestAnimationFrame 替代 setTimeout
function animate() {// 动画逻辑requestAnimationFrame(animate);
}
requestAnimationFrame(animate);// ✅ Web Workers 处理 CPU 密集型任务
const worker = new Worker('compute.js');
worker.postMessage(data);
worker.onmessage = e => processResult(e.data);

5️⃣ 内存管理技巧

// 及时清除引用
let largeData = getHugeData();function process() {// 使用数据...
}// 使用后立即释放
process();
largeData = null; // 解除引用// 避免闭包内存泄漏
function createHeavyClosure() {const bigObj = new Array(1000000);return () => {// ❌ 错误：闭包捕获bigObjconsole.log(bigObj.length); // ✅ 解决方案：只保留需要的数据const len = bigObj.length;return len;};
}

6️⃣ 循环优化

// ❌ 低效循环
for (let i = 0; i < arr.length; i++) { ... }// ✅ 优化方案
// 1. 缓存长度
const len = arr.length;
for (let i = 0; i < len; i++) { ... }// 2. 倒序循环（减少比较）
for (let i = arr.length; i--; ) { ... }// 3. 使用 while 循环
let i = arr.length;
while (i--) { ... }

7️⃣ DOM 操作优化

// ❌ 多次操作DOM
for (let i = 0; i < 100; i++) {const div = document.createElement('div');document.body.appendChild(div);
}// ✅ 使用文档片段（DocumentFragment）
const fragment = document.createDocumentFragment();
for (let i = 0; i < 100; i++) {const div = document.createElement('div');fragment.appendChild(div);
}
document.body.appendChild(fragment);

📊 性能检测工具

Chrome DevTools
- Performance 面板：分析运行时性能
- Memory 面板：检测内存泄漏
- Coverage 面板：查看代码使用率
Lighthouse：自动化性能评分
WebPageTest：多地点性能测试

🚀 高级优化技术

// 1. 使用 IntersectionObserver 实现懒加载
const observer = new IntersectionObserver(entries => {entries.forEach(entry => {if (entry.isIntersecting) {const img = entry.target;img.src = img.dataset.src;observer.unobserve(img);}});
});document.querySelectorAll('img.lazy').forEach(img => {observer.observe(img);
});// 2. 虚拟滚动（Virtual Scrolling）
// 仅渲染可视区域内容，示例使用 react-window 库
import { FixedSizeList } from 'react-window';const Row = ({ index, style }) => (<div style={style}>Row {index}</div>
);const VirtualList = () => (<FixedSizeListheight={400}width={300}itemCount={1000}itemSize={35}>{Row}</FixedSizeList>
);