性能优化技巧

性能优化是提升应用体验的关键，合理的优化手段能显著减少资源消耗，提高响应速度。下面从不同维度展开具体方法。

减少重绘与回流

频繁操作DOM会导致浏览器重复计算布局。使用documentFragment进行批量操作：

const fragment = document.createDocumentFragment();
for(let i=0; i<100; i++){
  const li = document.createElement('li');
  fragment.appendChild(li);
}
document.getElementById('list').appendChild(fragment);

缓存布局属性值避免强制同步布局：

// 错误写法：每次循环都触发回流
for(let i=0; i<elements.length; i++){
  elements[i].style.width = box.offsetWidth + 'px';
}

// 正确写法：先读取再写入
const width = box.offsetWidth;
for(let i=0; i<elements.length; i++){
  elements[i].style.width = width + 'px';
}

事件委托优化

大量事件监听会消耗内存。利用事件冒泡机制：

document.getElementById('parent').addEventListener('click', (e) => {
  if(e.target.matches('li.item')) {
    console.log('Item clicked:', e.target.dataset.id);
  }
});

防抖与节流控制

高频事件需要限制执行频率。防抖实现示例：

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

window.addEventListener('resize', debounce(() => {
  console.log('Window resized');
}, 300));

节流实现方案：

function throttle(fn, interval) {
  let lastTime = 0;
  return function(...args) {
    const now = Date.now();
    if(now - lastTime >= interval) {
      fn.apply(this, args);
      lastTime = now;
    }
  };
}

document.addEventListener('scroll', throttle(() => {
  console.log('Scrolling');
}, 200));

内存管理实践

及时清除无用引用防止内存泄漏：

// 定时器清理
const timer = setInterval(() => {}, 1000);
// 组件卸载时
clearInterval(timer);

// DOM引用清理
const elements = document.querySelectorAll('.temp');
elements.forEach(el => el.remove());

使用WeakMap存储临时数据：

const weakMap = new WeakMap();
const obj = {};
weakMap.set(obj, 'temporary data');
// obj被回收时自动清除

代码分割策略

动态加载非关键资源：

// 按需加载模块
button.addEventListener('click', async () => {
  const module = await import('./heavyModule.js');
  module.run();
});

// webpack魔法注释
import(/* webpackPrefetch: true */ './analytics.js');

高效数据操作

数组处理优先使用原生方法：

// 过滤大数据集
const filtered = largeArray.filter(item => item.active);

// 使用Set去重
const unique = [...new Set(duplicateArray)];

对象属性访问优化：

// 多次访问时缓存引用
const user = currentApp.user;
console.log(user.name, user.age);

// 使用对象解构
const { name, age } = currentApp.user;

Web Worker应用

将耗时任务移出主线程：

// main.js
const worker = new Worker('task.js');
worker.postMessage(data);
worker.onmessage = (e) => {
  console.log('Result:', e.data);
};

// task.js
self.onmessage = (e) => {
  const result = heavyComputation(e.data);
  self.postMessage(result);
};

动画性能提升

使用CSS3硬件加速：

.animate {
  transform: translateZ(0);
  will-change: transform;
}

requestAnimationFrame替代setTimeout：

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

网络请求优化

合并接口请求：

Promise.all([
  fetch('/api/user'),
  fetch('/api/products')
]).then(([user, products]) => {
  // 统一处理
});

使用AbortController取消请求：

const controller = new AbortController();
fetch('/api', { signal: controller.signal });

// 需要时取消
controller.abort();

缓存策略实施

Service Worker缓存方案：

// sw.js
self.addEventListener('fetch', (e) => {
  e.respondWith(
    caches.match(e.request)
      .then(response => response || fetch(e.request))
  );
});

本地存储分级使用：

// 小数据用sessionStorage
sessionStorage.setItem('tempData', JSON.stringify(data));

// 大数据用IndexedDB
const db = indexedDB.open('MyDB');
db.onsuccess = (e) => {
  const store = e.target.result
    .transaction('largeData', 'readwrite')
    .objectStore('largeData');
  store.put({ id: 1, content: bigData });
};