JavaScript性能优化

| 2025-05-17

JavaScript 性能优化笔记

1. 常见性能问题

频繁操作 DOM：每次操作 DOM 都会触发重排与重绘。
大数组循环：高复杂度循环影响渲染。
闭包滥用：内存占用大，可能导致泄漏。
递归深度大：可能导致调用栈溢出。

2. 优化策略

DOM 操作最小化

// 不推荐
for (let i = 0; i < 1000; i++) {
    document.body.appendChild(createDiv(i));
}

// 推荐：使用 DocumentFragment 批量操作
const fragment = document.createDocumentFragment();
for (let i = 0; i < 1000; i++) {
    fragment.appendChild(createDiv(i));
}
document.body.appendChild(fragment);

防抖和节流

防抖：适合输入搜索、resize

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

节流：适合滚动、鼠标移动

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

避免重复计算

使用缓存、Map 或闭包存储中间结果

const cache = {};
function fib(n) {
    if (cache[n]) return cache[n];
    if (n <= 1) return 1;
    cache[n] = fib(n-1) + fib(n-2);
    return cache[n];
}

异步优化

Web Worker 处理计算密集型任务
requestAnimationFrame 优化动画