JavaScript性能优化实战大纲
性能优化的核心目标
- 减少页面加载时间
- 降低内存消耗
- 提升代码执行效率
代码层面的优化
减少DOM操作
避免频繁的DOM访问和修改，使用文档片段（DocumentFragment）或离线DOM进行批量操作。
const fragment = document.createDocumentFragment();
for (let i = 0; i < 100; i++) {const node = document.createElement('div');fragment.appendChild(node);
}
document.body.appendChild(fragment);
避免全局变量污染
使用模块化（如ES6模块）或闭包减少全局变量的使用。
(function() {let localVar = '局部变量';
})();
事件委托
减少事件监听器的数量，利用事件冒泡机制。
document.getElementById('parent').addEventListener('click', (e) => {if (e.target.matches('button')) {console.log('按钮被点击');}
});
资源加载优化
异步加载脚本
使用async或defer属性优化脚本加载。
<script src="script.js" async></script>
懒加载非关键资源
延迟加载图片、视频等资源，优先加载核心内容。
<img data-src="image.jpg" loading="lazy" alt="示例图片">
内存管理
避免内存泄漏
及时清除不再使用的定时器、事件监听器和引用。
const timer = setInterval(() => {}, 1000);
// 不需要时清除
clearInterval(timer);
弱引用优化
使用WeakMap或WeakSet管理临时数据。
const weakMap = new WeakMap();
const obj = {};
weakMap.set(obj, '临时数据');
渲染性能优化
减少重绘和回流
使用transform和opacity触发GPU加速，避免频繁修改样式。
.element {transform: translateZ(0);
}
使用requestAnimationFrame
优化动画性能，避免直接使用setTimeout或setInterval。
function animate() {// 动画逻辑requestAnimationFrame(animate);
}
requestAnimationFrame(animate);
工具与实践
性能分析工具
- Chrome DevTools的Performance和Memory面板
- Lighthouse生成性能报告
代码拆分与Tree Shaking
使用Webpack或Rollup等工具移除未使用的代码。
// 动态导入模块
import('./module.js').then(module => {module.doSomething();
});
总结与进阶
- 持续监控性能指标
- 结合具体业务场景选择优化策略