如何对 JavaScript 代码进行性能优化？

优化 JavaScript 代码可以提高页面加载速度、执行效率和用户体验，同时降低资源消耗。以下是一些关键策略和代码示例：

1. 减少计算和内存占用
   • 避免过多全局变量，使用本地作用域减少内存泄露风险：

     // 推荐做法：封装在函数作用域内
     (function() {
        let localVar = 'I am local'; // 局部变量更安全
     })();
     

   • 优化循环结构，避免重复访问属性:

     const array = [...]; // 示例数组
     const len = array.length; // 提前缓存长度
     for (let i = 0; i < len; i++) {  // 循环中复用缓存值
        // 操作
     }
     

2. 优化 DOM 操作
   • 减少重排(Reflow)和重绘(Repaint)： 使用样式批量更新或 class 替换:

     const element = document.getElementById('example');
     
     // ❌ 避免单行多次修改样式
     element.style.width = '100px';
     element.style.height = '50px';
     
     // ✅ 推荐： CSSText 或 class 更新
     element.style.cssText = 'width:100px; height:50px;';
     element.classList.add('new-style');
     

   • 事件委托减少监听器数量：

     // ✅ 通过事件委托处理多个元素
     document.addEventListener('click', (e) => {
        if (e.target.matches('.button')) {
           // 处理逻辑
        }
     });
     

3. 异步处理和任务调度
   • 引入事件节流(Throttle)或防抖(Debounce)优化高频触发:

     // 防抖示例
     function debounce(func, delay) {
        let timeoutId;
        return (...args) => {
           clearTimeout(timeoutId);
           timeoutId = setTimeout(() => func(...args), delay);
        };
     }
     

   • 长任务分片： 使用 requestIdleCallback 或定时器拆分:

     function longTask() { /* 耗时逻辑 */ }
     const chunked = () => {
        // 每帧执行小部分
        requestIdleCallback((deadline) => {
           if (deadline.timeRemaining() > 0) {
              // 任务碎片
           }
        });
     };
     

4. 浏览器加载和内存管理
   • 脚本加载策略： 置于页面底部或使用 async/defer 属性避免阻塞渲染:

     <script src="app.js" async></script> <!-- 非关键脚本使用 async -->
     

   • 文件精简： minify JavaScript 文件以减少体积和 HTTP 请求数量。
   • 内存泄露预防： 定期清理定时器和事件监听器:

     let timer = setInterval(() => { }, 1000);
     element.addEventListener('click', handler);
          
     // 必要的清理逻辑
     clearInterval(timer);
     element.removeEventListener('click', handler);
     

5. 复杂计算的并行处理
   • 通过 Web Workers 将耗时任务移至后台线程:

     // main.js
     const worker = new Worker('worker.js');
     worker.postMessage(data);
     worker.onmessage = (e) => { /*处理结果*/ };
          
     // worker.js
     self.onmessage = (e) => {
        const result = heavyCompute(e.data); // 后台计算
        self.postMessage(result);
     };
     

结合性能分析工具如 Lighthouse 和 Chrome DevTools Memory 面板监控优化效果。