知识库

Appearance

Return to top
On this page

JavaScript优化

JavaScript优化是提升Web应用性能的关键环节，通过减少执行时间、内存占用和网络传输量，可以显著改善用户体验。

代码优化

减少DOM操作

频繁的DOM操作是性能瓶颈之一，应尽量减少不必要的DOM访问：

javascript
// 避免频繁访问DOM
// 不推荐
for (let i = 0; i < 100; i++) {
  document.getElementById('container').innerHTML += '<div>' + i + '</div>';
}

// 推荐
let html = '';
for (let i = 0; i < 100; i++) {
  html += '<div>' + i + '</div>';
}
document.getElementById('container').innerHTML = html;

使用DocumentFragment

对于大量DOM操作，使用DocumentFragment可以提高性能：

javascript
const fragment = document.createDocumentFragment();
for (let i = 0; i < items.length; i++) {
  const div = document.createElement('div');
  div.textContent = items[i];
  fragment.appendChild(div);
}
document.getElementById('container').appendChild(fragment);

事件优化

事件委托

使用事件委托减少事件监听器数量：

javascript
// 不推荐：为每个按钮添加监听器
document.querySelectorAll('.button').forEach(button => {
  button.addEventListener('click', handleClick);
});

// 推荐：使用事件委托
document.getElementById('container').addEventListener('click', function(e) {
  if (e.target.classList.contains('button')) {
    handleClick(e);
  }
});

防抖和节流

防抖（Debounce）

防止函数在短时间内被多次调用：

javascript
function debounce(func, delay) {
  let timeoutId;
  return function (...args) {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => func.apply(this, args), delay);
  };
}

const handleResize = debounce(() => {
  console.log('窗口大小改变');
}, 300);
window.addEventListener('resize', handleResize);

节流（Throttle）

限制函数在一定时间间隔内的执行次数：

javascript
function throttle(func, delay) {
  let shouldWait = false;
  return function (...args) {
    if (!shouldWait) {
      func.apply(this, args);
      shouldWait = true;
      setTimeout(() => {
        shouldWait = false;
      }, delay);
    }
  };
}

异步编程优化

使用Web Workers

将耗时任务放到Web Workers中执行，避免阻塞主线程：

javascript
// main.js
const worker = new Worker('worker.js');
worker.postMessage({ data: largeDataSet });
worker.onmessage = function(e) {
  console.log('处理完成:', e.data);
};

// worker.js
self.onmessage = function(e) {
  const result = processLargeData(e.data);
  self.postMessage(result);
};

模块和打包优化

代码分割

使用动态导入实现代码分割：

javascript
// 动态导入
async function loadModule() {
  const module = await import('./heavy-module.js');
  module.doSomething();
}

// 条件加载
if (needsChartLibrary) {
  import('./chart-library.js').then(chart => {
    chart.init();
  });
}

缓存策略

使用localStorage缓存

javascript
function getCachedData(key, fetchFunction) {
  const cached = localStorage.getItem(key);
  if (cached) {
    const { data, timestamp, ttl } = JSON.parse(cached);
    if (Date.now() - timestamp < ttl) {
      return Promise.resolve(data);
    }
  }
  
  return fetchFunction().then(data => {
    localStorage.setItem(key, JSON.stringify({
      data,
      timestamp: Date.now(),
      ttl: 3600000 // 1小时
    }));
    return data;
  });
}

最佳实践

  • 避免内存泄漏
  • 使用现代JavaScript特性
  • 实施懒加载策略
  • 优化第三方库使用
  • 使用性能分析工具持续监控