性能优化技巧

理解性能瓶颈

性能优化的第一步是找到瓶颈所在。常见的性能问题包括DOM操作过多、频繁的重绘与回流、内存泄漏、未优化的算法等。使用Chrome DevTools的Performance面板可以录制页面运行时的性能数据，分析哪些函数耗时最长。

// 示例：低效的DOM操作
const list = document.getElementById('list');
for (let i = 0; i < 1000; i++) {
  const item = document.createElement('li');
  item.textContent = `Item ${i}`;
  list.appendChild(item); // 每次循环都触发回流
}

减少DOM操作

DOM操作是JavaScript中最耗性能的操作之一。批量修改DOM比多次单独修改要高效得多。使用文档片段(documentFragment)或innerHTML可以减少回流次数。

// 优化后的DOM操作
const list = document.getElementById('list');
const fragment = document.createDocumentFragment();

for (let i = 0; i < 1000; i++) {
  const item = document.createElement('li');
  item.textContent = `Item ${i}`;
  fragment.appendChild(item);
}

list.appendChild(fragment); // 只触发一次回流

事件委托

对于大量相似元素的事件处理，使用事件委托可以减少内存消耗和提高性能。将事件监听器添加到父元素，利用事件冒泡机制处理子元素事件。

// 事件委托示例
document.getElementById('list').addEventListener('click', function(e) {
  if (e.target.tagName === 'LI') {
    console.log('Clicked on:', e.target.textContent);
  }
});

防抖与节流

对于频繁触发的事件(如scroll、resize、input)，使用防抖(debounce)或节流(throttle)可以显著提高性能。

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

// 节流实现
function throttle(func, limit) {
  let inThrottle;
  return function() {
    if (!inThrottle) {
      func.apply(this, arguments);
      inThrottle = true;
      setTimeout(() => inThrottle = false, limit);
    }
  };
}

优化循环

循环是性能敏感区域。减少循环中的计算，缓存数组长度，使用更高效的循环方式。

// 优化前
for (let i = 0; i < arr.length; i++) {
  // 每次循环都计算arr.length
}

// 优化后
const len = arr.length;
for (let i = 0; i < len; i++) {
  // 缓存了长度
}

// 最快的循环方式
let i = arr.length;
while (i--) {
  // 倒序循环最快
}

内存管理

JavaScript有垃圾回收机制，但仍需注意内存泄漏。常见的内存泄漏包括未清理的定时器、闭包中保留的DOM引用、未移除的事件监听器等。

// 内存泄漏示例
function setup() {
  const element = document.getElementById('button');
  element.addEventListener('click', onClick);
  
  function onClick() {
    // 闭包保留了element引用
    element.style.backgroundColor = 'red';
  }
}

// 正确做法
function setup() {
  const element = document.getElementById('button');
  element.addEventListener('click', onClick);
  
  function onClick() {
    this.style.backgroundColor = 'red';
  }
  
  // 需要时移除监听器
  // element.removeEventListener('click', onClick);
}

使用Web Workers

对于CPU密集型任务，使用Web Workers可以避免阻塞主线程。

// 主线程代码
const worker = new Worker('worker.js');
worker.postMessage({ data: largeArray });
worker.onmessage = function(e) {
  console.log('Result:', e.data);
};

// worker.js
self.onmessage = function(e) {
  const result = processData(e.data); // 耗时操作
  self.postMessage(result);
};

合理使用缓存

缓存计算结果、DOM查询结果可以减少重复计算。

// 缓存DOM查询
const elements = {
  header: document.getElementById('header'),
  content: document.getElementById('content'),
  footer: document.getElementById('footer')
};

// 缓存函数结果
function memoize(fn) {
  const cache = {};
  return function(...args) {
    const key = JSON.stringify(args);
    if (cache[key]) return cache[key];
    return cache[key] = fn.apply(this, args);
  };
}

优化动画

使用requestAnimationFrame代替setTimeout/setInterval实现动画，CSS动画比JavaScript动画更高效。

// 使用requestAnimationFrame
function animate() {
  // 动画逻辑
  requestAnimationFrame(animate);
}
requestAnimationFrame(animate);

代码分割与懒加载

将代码拆分成小块，按需加载可以提高初始加载速度。

// 动态导入(懒加载)
button.addEventListener('click', async () => {
  const module = await import('./module.js');
  module.doSomething();
});

减少重绘与回流

批量样式修改，使用transform和opacity等不影响布局的属性实现动画。

// 不好的做法
element.style.width = '100px';
element.style.height = '200px';
element.style.left = '10px';
element.style.top = '20px';

// 好的做法
element.style.cssText = 'width:100px; height:200px; left:10px; top:20px;';
// 或使用class
element.classList.add('new-style');

使用高效的选择器

CSS选择器从右向左匹配，避免使用通配符和深层嵌套。

// 低效
document.querySelector('div.container ul li a');

// 更高效
document.querySelector('.container-link');

避免同步布局

读取布局属性(如offsetWidth)会强制浏览器执行同步布局，应批量读取。

// 触发同步布局
const width = element.offsetWidth; // 读取
element.style.width = width + 10 + 'px'; // 写入
const height = element.offsetHeight; // 读取

// 优化：先读取后写入
const width = element.offsetWidth;
const height = element.offsetHeight;
element.style.width = width + 10 + 'px';

使用更高效的数据结构

根据场景选择合适的数据结构，如Map/Object、Set/Array的取舍。

// 查找使用Set比Array更高效
const array = [1, 2, 3, 4, 5];
const set = new Set(array);

// 检查元素存在
array.includes(3); // O(n)
set.has(3); // O(1)

减少作用域链查找

缓存全局变量和深层对象访问，减少作用域链查找次数。

// 优化前
function process() {
  for (let i = 0; i < 1000; i++) {
    console.log(window.location.href); // 每次都要查找window
  }
}

// 优化后
function process() {
  const href = window.location.href; // 缓存
  for (let i = 0; i < 1000; i++) {
    console.log(href);
  }
}

使用位操作

在密集计算中，位操作比数学运算更快。

// 取整
const x = 1.5;
const floor = ~~x; // 1
const round = x + 0.5 | 0; // 2

// 奇偶判断
if (value & 1) {
  // 奇数
} else {
  // 偶数
}

避免使用with和eval

with会破坏作用域链，eval有安全风险且影响性能。

// 避免使用
with (obj) {
  a = 1; // 可能意外创建全局变量
}

eval('var x = 10;'); // 动态解析影响性能

优化网络请求

合并请求，使用HTTP/2，压缩资源，合理设置缓存头。

// 合并API请求
async function fetchAllData() {
  const [users, posts] = await Promise.all([
    fetch('/api/users'),
    fetch('/api/posts')
  ]);
  // 处理数据
}

使用现代JavaScript特性

合理使用现代JavaScript特性如箭头函数、模板字符串、解构等可以使代码更简洁高效。

// 更简洁的代码通常也更快
const names = users.map(user => user.name);
const { id, ...rest } = obj;
const url = `/api/${id}`;