JavaScript 性能优化实战指南 - 皮皮的技术小站

性能优化是每个前端开发者必须掌握的技能。本文将从内存管理、事件循环、渲染优化等多个维度，带你全面提升 JavaScript 代码性能。

1. 理解事件循环

JavaScript 的事件循环模型决定了代码执行顺序：

调用栈（Call Stack） - 同步任务执行的地方
宏任务（MacroTask） - setTimeout、setInterval、I/O
微任务（MicroTask） - Promise.then、MutationObserver

console.log('1');

setTimeout(() => console.log('2'), 0);

Promise.resolve().then(() => console.log('3'));

console.log('4');

// 输出：1, 4, 3, 2

2. 内存管理最佳实践

避免内存泄漏

// ❌ 不好的做法
let data;
function loadData() {
    data = fetchLargeData(); // 全局引用，无法回收
}

// ✅ 好的做法
function loadData() {
    const data = fetchLargeData();
    processData(data);
    // data 会自动被 GC 回收
}

及时清理事件监听器

const handler = () => console.log('clicked');
element.addEventListener('click', handler);

// 不需要时移除
element.removeEventListener('click', handler);

3. 防抖与节流

防抖（Debounce）

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

// 使用场景：搜索框输入
input.addEventListener('input', debounce(search, 300));

节流（Throttle）

function throttle(fn, limit) {
    let inThrottle;
    return function(...args) {
        if (!inThrottle) {
            fn.apply(this, args);
            inThrottle = true;
            setTimeout(() => inThrottle = false, limit);
        }
    };
}

// 使用场景：滚动事件
window.addEventListener('scroll', throttle(handleScroll, 100));

4. 优化 DOM 操作

减少 DOM 访问频率，使用变量缓存
批量修改 DOM，使用 DocumentFragment
避免强制同步布局（Force Synchronous Layout）

5. 使用 Web Workers

将计算密集型任务移到 Web Worker，避免阻塞主线程：

// 主线程
const worker = new Worker('worker.js');
worker.postMessage(data);
worker.onmessage = (e) => console.log(e.data);

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

提示： 使用 Chrome DevTools 的 Performance 面板分析性能瓶颈。

总结

性能优化是一个持续的过程。理解底层原理，结合实际场景选择合适的优化策略，才能打造出流畅的用户体验。