JavaScript 性能优化笔记

1. 常见性能问题

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

2. 优化策略

  1. DOM 操作最小化

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    // 不推荐
    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);

  2. 防抖和节流

  • 防抖：适合输入搜索、resize
    1
    2
    3
    4
    5
    6
    7
    function debounce(fn, delay = 300) {
        let timer;
        return function(...args) {
            clearTimeout(timer);
            timer = setTimeout(() => fn.apply(this, args), delay);
        }
    }
  • 节流：适合滚动、鼠标移动
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    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);
            }
        }
    }
  1. 避免重复计算
  • 使用缓存、Map 或闭包存储中间结果
    1
    2
    3
    4
    5
    6
    7
    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];
    }
  1. 异步优化
  • Web Worker 处理计算密集型任务
  • requestAnimationFrame 优化动画