以下是 JavaScript 性能优化的实战策略及代码示例，综合多个高性能场景的优化经验：
一、代码执行优化
1. 条件渲染优化
频繁切换显示状态的元素优先用 display: none 替代 DOM 的销毁与重建，减少重排次数。
// 性能更优
element.style.display = isVisible ? 'block' : 'none';
2. 事件委托机制
为动态列表项绑定父级事件监听器，减少事件处理器数量：
document.getElementById('list').addEventListener('click', (e) => {if (e.target.matches('.item')) {handleItemClick(e.target.dataset.id);}
});
3. 防抖与节流
高频事件（如滚动、输入）使用防抖/节流降低函数执行频率：
const debounce = (fn, delay) => {let timer;return (...args) => {clearTimeout(timer);timer = setTimeout(() => fn(...args), delay);};
};
二、资源加载优化
1. 代码分割与懒加载
动态导入模块减少首屏加载体积：
// 动态加载非关键模块
button.addEventListener('click', async () => {const module = await import('./heavyModule.js');module.run();
});
2. 数据缓存策略
本地缓存高频接口数据，减少重复请求：
const fetchData = async (url) => {const cacheKey = `cache_${url}`;const cached = localStorage.getItem(cacheKey);if (cached) return JSON.parse(cached);const data = await fetch(url).then(res => res.json());localStorage.setItem(cacheKey, JSON.stringify(data));return data;
};
三、DOM 操作优化
1. 批量 DOM 更新
使用文档片段减少多次 DOM 操作：
const fragment = document.createDocumentFragment();
for (let i = 0; i < 1000; i++) {const div = document.createElement('div');fragment.appendChild(div);
}
document.body.appendChild(fragment);
2. 虚拟列表技术
大数据列表仅渲染可视区域内容：
// 使用第三方库如 react-virtualized 或自行实现视窗渲染
四、内存管理
1. 定时器与事件解绑
组件销毁时清理全局资源：
let timer = setInterval(() => {}, 1000);
// 页面卸载时
window.addEventListener('beforeunload', () => clearInterval(timer));
2. 避免内存泄漏
移除不再使用的对象引用：
const data = getHugeData();
// 使用后主动释放
processData(data);
data = null;
五、性能监测与调试
1. Lighthouse 性能评分
生成量化性能报告并针对性优化：
npm install -g lighthouse
lighthouse http://localhost:3000 --view
2. Chrome Performance 面板
定位长任务和内存泄漏点：
// 标记代码执行区间
console.time('heavyTask');
performHeavyTask();
console.timeEnd('heavyTask');
六、框架级优化（以 Vue/React 为例）
1. 列表渲染 Key 值
为动态列表项设置唯一标识，提升 Diff 效率：
// Vue 示例
<div v-for="item in list" :key="item.id">{{ item.text }}</div>
2. 响应式数据优化
避免深层嵌套的响应式对象，必要时使用 shallowRef：
// Vue3 示例
const largeObj = shallowRef({ ... });
七、网络层优化
1. HTTP/2 与资源合并
小文件合并后通过 HTTP/2 多路复用传输：
# 使用 Webpack 合并小图标为雪碧图
npm install webpack-spritesmith --save-dev
2. 预加载关键资源
提前加载首屏必需资源：
<link rel="preload" href="critical.css" as="style">
通过综合应用上述策略，可显著提升 JavaScript 应用的运行时效率与用户体验。建议结合项目特点选择优化点，并通过性能监测工具持续追踪优化效果。