網頁性能優化是提升用戶體驗、減少加載時間和提高資源利用率的關鍵。以下是針對網頁生命周期和事件處理的性能優化技巧，結合代碼示例，重點覆蓋加載、渲染、事件處理和資源管理等方面。

1. 優化加載階段

• 減少關鍵資源請求：

  • 合并CSS/JS文件，減少HTTP請求。

  • 使用defer或async加載非關鍵腳本：
    html

    <script defer src="script.js"></script> <!-- 延遲加載，DOM解析后執行 -->
    <script async src="analytics.js"></script> <!-- 異步加載，不阻塞解析 -->
    

• 啟用資源預加載：

  • 使用優先加載關鍵資源：
    html

    <link rel="preload" href="critical.css" as="style">
    <link rel="preload" href="main.js" as="script">
    

• 壓縮和優化資源：

  • 使用工具（如terser**、cssnano）壓縮JS/CSS。**

  • 優化圖片：使用WebP格式、壓縮工具（如ImageOptim**）或CDN自動優化。**
    html

    <img src="image.webp" alt="example" loading="lazy">
    

2. 優化DOM解析和渲染

• 減少DOM操作：

  • 批量更新DOM，避免頻繁重排（reflow）和重繪（repaint）：
    javascript

    // 低效：多次操作DOM
    for (let i = 0; i < items.length; i++) {document.getElementById('list').innerHTML += `<li>${items[i]}</li>`;
    }// 高效：一次性操作
    const fragment = document.createDocumentFragment();
    items.forEach(item => {const li = document.createElement('li');li.textContent = item;fragment.appendChild(li);
    });
    document.getElementById('list').appendChild(fragment);
    

• 使用CSS替代JS動畫：

  • CSS動畫通常由GPU加速，比JS動畫更高效：
    css

    .fade-in {animation: fadeIn 0.5s ease-in;
    }
    @keyframes fadeIn {from { opacity: 0; }to { opacity: 1; }
    }
    

• 延遲非關鍵渲染：

  • 使用requestIdleCallback處理低優先級任務：
    javascript

    requestIdleCallback(() => {console.log('執行低優先級任務，如加載跟蹤腳本');// 加載非關鍵分析腳本
    }, { timeout: 2000 });
    

3. 優化事件處理

• 事件委托：

  • 為父元素綁定事件，減少監聽器數量：
    javascript

    document.getElementById('list').addEventListener('click', (e) => {if (e.target.tagName === 'LI') {console.log('點擊了列表項：', e.target.textContent);}
    });
    

• 防抖和節流：

  • 限制高頻事件（如scroll**、resize）的觸發頻率：**
    javascript

    // 節流：每200ms最多觸發一次
    function throttle(fn, delay) {let last = 0;return (...args) => {const now = Date.now();if (now - last >= delay) {fn(...args);last = now;}};
    }window.addEventListener('scroll', throttle(() => {console.log('滾動事件觸發');
    }, 200));// 防抖：停止操作后200ms觸發
    function debounce(fn, delay) {let timer;return (...args) => {clearTimeout(timer);timer = setTimeout(() => fn(...args), delay);};
    }window.addEventListener('resize', debounce(() => {console.log('窗口大小調整完成');
    }, 200));
    

• 移除無用監聽器：

  • 動態元素卸載時清理事件，防止內存泄漏：
    javascript

    const button = document.getElementById('myButton');
    const handler = () => console.log('點擊');
    button.addEventListener('click', handler);
    // 移除
    button.removeEventListener('click', handler);
    

4. 優化資源管理和網絡

• 懶加載：

  • 使用loading="lazy"延遲加載圖片和iframe：
    html

    <img src="below-fold.jpg" loading="lazy" alt="lazy image">
    

  • 動態加載JS模塊：
    javascript

    import('module.js').then(module => {module.init();
    });
    

• 緩存策略：

  • 使用Service Worker緩存靜態資源：
    javascript

    // service-worker.js
    self.addEventListener('install', (event) => {event.waitUntil(caches.open('my-cache').then((cache) => {return cache.addAll(['/index.html', '/styles.css', '/script.js']);}));
    });self.addEventListener('fetch', (event) => {event.respondWith(caches.match(event.request).then((response) => {return response || fetch(event.request);}));
    });
    

  • 設置HTTP緩存頭（如Cache-Control**）：**
    nginx

    # Nginx 配置示例
    location ~* \.(jpg|png|css|js)$ {expires 1y;add_header Cache-Control "public";
    }
    

• 使用CDN：

  • 加速靜態資源分發，減少延遲：
    html

    <script src="https://cdn.example.com/jquery.min.js"></script>
    

5. 優化頁面可見性和交互

• 暫停隱藏頁面任務：

  • 使用visibilitychange暫停資源密集型任務：
    javascript

    document.addEventListener('visibilitychange', () => {if (document.visibilityState === 'hidden') {clearInterval(pollingTimer); // 停止輪詢} else {pollingTimer = setInterval(fetchData, 5000); // 恢復輪詢}
    });
    

• 優先處理用戶交互：

  • 使用requestAnimationFrame優化動畫和交互：
    javascript

    function animate() {// 更新動畫requestAnimationFrame(animate);
    }
    requestAnimationFrame(animate);
    

6. 性能監控和調試

• 使用Performance API：

  • 測量關鍵時間點：
    javascript

    window.addEventListener('load', () => {const { domContentLoadedEventEnd, loadEventEnd } = performance.timing;console.log('DOM加載時間：', domContentLoadedEventEnd - navigationStart);console.log('頁面總加載時間：', loadEventEnd - navigationStart);
    });
    

• Lighthouse分析：
  • 使用Chrome DevTools的Lighthouse工具檢查性能，獲取優化建議。
• 錯誤監控：

  • 捕獲并記錄運行時錯誤：
    javascript

    window.addEventListener('error', (e) => {fetch('/log-error', {method: 'POST',body: JSON.stringify({ message: e.message, file: e.filename }),});
    }, true);
    

7. 其他實用技巧

• Tree Shaking：使用Webpack/Rollup移除未使用的代碼。

• 代碼分割：按路由或功能模塊分割JS，減少初始加載量：
  javascript

  // Webpack 動態導入
  import(/* webpackChunkName: "module" */ './module.js').then(module => {module.default();
  });
  

• 避免阻塞主線程：

  • 將耗時任務移到Web Worker：
    javascript

    // main.js
    const worker = new Worker('worker.js');
    worker.postMessage({ task: 'heavyComputation' });
    worker.onmessage = (e) => console.log('結果：', e.data);// worker.js
    self.onmessage = (e) => {const result = heavyComputation(e.data);self.postMessage(result);
    };
    

• 優化字體加載：

  • 使用font-display: swap避免FOUT（無樣式文本閃爍）：
    css

    @font-face {font-family: 'MyFont';src: url('myfont.woff2') format('woff2');font-display: swap;
    }
    

注意事項

• 測試環境：在不同設備和網絡條件下（3G、4G）測試性能。
• 漸進增強：確保核心功能在無JS或低性能設備上可用。
• 用戶體驗：優化性能時避免犧牲可訪問性（如ARIA支持）。
• 工具支持：使用Vite、esbuild等現代構建工具加速開發和打包。