JavaScript代码性能优化

以下是 JavaScript 性能优化的实战策略及代码示例，综合多个高性能场景的优化经验：

一、代码执行优化

‌1. 条件渲染优化‌

频繁切换显示状态的元素优先用 display: none 替代 DOM 的销毁与重建，减少重排次数‌。

javascript 复制代码

// 性能更优
element.style.display = isVisible ? 'block' : 'none';

‌2. 事件委托机制‌

为动态列表项绑定父级事件监听器，减少事件处理器数量‌：

javascript 复制代码

document.getElementById('list').addEventListener('click', (e) => {
  if (e.target.matches('.item')) {
    handleItemClick(e.target.dataset.id);
  }
});

3‌. 防抖与节流‌

高频事件（如滚动、输入）使用防抖/节流降低函数执行频率‌：

javascript 复制代码

const debounce = (fn, delay) => {
  let timer;
  return (...args) => {
    clearTimeout(timer);
    timer = setTimeout(() => fn(...args), delay);
  };
};

二、资源加载优化

‌1. 代码分割与懒加载‌

动态导入模块减少首屏加载体积‌：

javascript 复制代码

// 动态加载非关键模块
button.addEventListener('click', async () => {
  const module = await import('./heavyModule.js');
  module.run();
});

2‌. 数据缓存策略‌

本地缓存高频接口数据，减少重复请求‌：

javascript 复制代码

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 操作‌：

javascript 复制代码

const fragment = document.createDocumentFragment();
for (let i = 0; i < 1000; i++) {
  const div = document.createElement('div');
  fragment.appendChild(div);
}
document.body.appendChild(fragment);

‌2. 虚拟列表技术‌

大数据列表仅渲染可视区域内容‌：

javascript 复制代码

// 使用第三方库如 react-virtualized 或自行实现视窗渲染

四、内存管理

1‌. 定时器与事件解绑‌

组件销毁时清理全局资源‌：

javascript 复制代码

let timer = setInterval(() => {}, 1000);
// 页面卸载时
window.addEventListener('beforeunload', () => clearInterval(timer));

‌2. 避免内存泄漏‌

移除不再使用的对象引用：

javascript 复制代码

const data = getHugeData();
// 使用后主动释放
processData(data);
data = null;

五、性能监测与调试

‌1. Lighthouse 性能评分‌

生成量化性能报告并针对性优化‌：

bash 复制代码

npm install -g lighthouse
lighthouse http://localhost:3000 --view

‌2. Chrome Performance 面板‌

定位长任务和内存泄漏点‌：

javascript 复制代码

// 标记代码执行区间
console.time('heavyTask');
performHeavyTask();
console.timeEnd('heavyTask');

六、框架级优化（以 Vue/React 为例）

1‌. 列表渲染 Key 值‌

为动态列表项设置唯一标识，提升 Diff 效率‌：

javascript 复制代码

// Vue 示例
<div v-for="item in list" :key="item.id">{{ item.text }}</div>

‌2. 响应式数据优化‌

避免深层嵌套的响应式对象，必要时使用 shallowRef‌：

javascript 复制代码

// Vue3 示例
const largeObj = shallowRef({ ... });

七、网络层优化

‌1. HTTP/2 与资源合并‌

小文件合并后通过 HTTP/2 多路复用传输‌：

bash 复制代码

# 使用 Webpack 合并小图标为雪碧图
npm install webpack-spritesmith --save-dev

‌2. 预加载关键资源‌

提前加载首屏必需资源‌：

html 复制代码

<link rel="preload" href="critical.css" as="style">

通过综合应用上述策略，可显著提升 JavaScript 应用的运行时效率与用户体验。建议结合项目特点选择优化点，并通过性能监测工具持续追踪优化效果‌。