随着应用规模的增长，JavaScript 性能的优化变得尤为重要。这篇文章将分享 10 个实用的优化技巧，帮助开发者提升前端性能。
- 减少 DOM 操作
操作 DOM 是性能瓶颈。将多个操作合并到一个操作中，或者使用虚拟 DOM（如 React）可以显著提高性能。
// 不推荐
document.getElementById(‘box’).style.color = ‘red’;
document.getElementById(‘box’).style.fontSize = ‘20px’;
// 推荐
const box = document.getElementById(‘box’);
box.style.cssText = ‘color: red; font-size: 20px;’;
- 使用防抖和节流优化事件
频繁触发的事件（如滚动或输入）会导致性能问题。可以用防抖（debounce）或节流（throttle）来优化。
// 防抖函数：一定时间内未触发，才执行
function debounce(func, delay) {
let timer;
return function (…args) {
clearTimeout(timer);
timer = setTimeout(() => func.apply(this, args), delay);
};
}
// 节流函数：一定时间间隔内只执行一次
function throttle(func, interval) {
let lastTime = 0;
return function (…args) {
const now = Date.now();
if (now - lastTime >= interval) {
lastTime = now;
func.apply(this, args);
}
};
}
- 尽量使用 const 和 let
相比 var，const 和 let 有更小的作用域范围，有助于避免意外的变量重定义。
// 推荐
const PI = 3.14;
let count = 0;
// 不推荐
var PI = 3.14;
var count = 0;
- 懒加载资源
对于图片和脚本，采用按需加载可以减少页面初始加载时间。例如，使用 loading=“lazy” 属性。
- 使用 Web Worker 处理密集计算
将密集计算任务移到 Web Worker 中，避免阻塞主线程。
const worker = new Worker(‘worker.js’);
worker.postMessage(‘start’); // 主线程传递任务
worker.onmessage = (event) => {
console.log(‘结果：’, event.data);
};
- 压缩和混淆代码
使用工具（如 Webpack、Terser）来压缩和混淆代码，减少文件体积，提升加载速度。
- 避免内存泄漏
内存泄漏会降低性能，及时清理未使用的对象或事件监听器。例如：
// 移除事件监听器
element.addEventListener(‘click’, handleClick);
// 清理
element.removeEventListener(‘click’, handleClick);
- 使用请求动画帧优化动画
代替 setInterval 或 setTimeout，使用 requestAnimationFrame 创建平滑的动画。
function animate() {
// 动画逻辑
requestAnimationFrame(animate);
}
animate();
- 按需引入库
只加载当前页面需要的部分，而不是引入整个库。例如，使用 Lodash 的 import 方法按需加载：
import debounce from ‘lodash/debounce’;
- 开启浏览器缓存
通过配置 HTTP 缓存策略，减少重复加载资源。
通过这些优化技巧，你可以让 JavaScript 应用运行得更快、更高效。性能优化需要根据项目实际情况不断测试和调整，找到最适合的方案。
