JavaScript性能优化实战技术文章大纲

代码层面优化

避免全局变量污染，使用let和const替代var，减少作用域链查找开销。

// 反例：全局变量
var globalVar = '低效';

// 正例：局部变量
function optimized() {
  const localVar = '高效';
}

减少DOM操作，合并多次操作或使用文档片段（DocumentFragment）。

// 反例：频繁操作DOM
for (let i = 0; i < 100; i++) {
  document.body.innerHTML += `<div>${i}</div>`;
}

// 正例：使用文档片段
const fragment = document.createDocumentFragment();
for (let i = 0; i < 100; i++) {
  const div = document.createElement('div');
  div.textContent = i;
  fragment.appendChild(div);
}
document.body.appendChild(fragment);

事件处理优化

使用事件委托替代批量事件绑定，减少内存占用。

// 反例：为每个子元素绑定事件
document.querySelectorAll('.item').forEach(item => {
  item.addEventListener('click', handleClick);
});

// 正例：事件委托
document.querySelector('.parent').addEventListener('click', (e) => {
  if (e.target.classList.contains('item')) {
    handleClick(e);
  }
});

防抖（Debounce）与节流（Throttle）控制高频事件触发频率。

// 防抖实现
function debounce(fn, delay) {
  let timer;
  return function() {
    clearTimeout(timer);
    timer = setTimeout(() => fn.apply(this, arguments), delay);
  };
}

数据加载与渲染优化

懒加载非关键资源（如图片、组件），使用Intersection Observer API。

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));

虚拟列表（Virtual List）优化长列表渲染，仅渲染可视区域内容。

内存管理

及时清除定时器、事件监听器及无效引用，避免内存泄漏。

// 清除无效引用示例
let heavyObject = { data: new Array(1000000).fill('data') };
function cleanup() {
  heavyObject = null; // 手动释放内存
}

使用弱引用（WeakMap/WeakSet）存储临时数据。

工具与监控

利用Chrome DevTools的Performance和Memory面板分析性能瓶颈。
集成Lighthouse进行自动化性能评分与优化建议。

# 使用Lighthouse命令行工具
lighthouse https://example.com --view --output=html

编译与打包优化

通过Tree Shaking（如Webpack配置）移除未引用代码。

// webpack.config.js
module.exports = {
  mode: 'production',
  optimization: {
    usedExports: true,
  },
};

代码分割（Code Splitting）按需加载模块。

// 动态导入示例
import('./module').then(module => {
  module.run();
});