下面是每個性能優化技術的具體應用場景示例，結合代碼說明如何在實際項目中使用這些優化方法：

1. 批量DOM操作與DocumentFragment

應用場景：動態渲染大量列表項（如評論區、商品列表）
問題：逐個添加DOM元素會導致多次重排/重繪
解決方案：使用DocumentFragment在內存中構建DOM樹，最后一次性添加到文檔

// 模擬從API獲取1000條評論數據
const comments = Array(1000).fill().map((_, i) => ({id: i,text: `評論內容 ${i}`
}));function renderComments(comments) {const commentList = document.getElementById('comment-list');const fragment = document.createDocumentFragment();comments.forEach(comment => {const div = document.createElement('div');div.className = 'comment-item';div.innerHTML = `<p>${comment.text}</p>`;fragment.appendChild(div);});commentList.appendChild(fragment); // 單次DOM操作
}renderComments(comments);

2. 事件委托

應用場景：動態列表項的點擊事件處理（如待辦事項、導航菜單）
問題：為每個列表項單獨添加事件監聽器會占用大量內存
解決方案：將事件監聽器添加到父元素，利用事件冒泡機制

<ul id="todo-list"><li>任務1 <button class="delete">刪除</button></li><li>任務2 <button class="delete">刪除</button></li><li>任務3 <button class="delete">刪除</button></li>
</ul><script>document.getElementById('todo-list').addEventListener('click', function(e) {if (e.target.classList.contains('delete')) {const listItem = e.target.closest('li');listItem.remove(); // 刪除對應的任務項}});
</script>

3. 防抖（Debounce）

應用場景：搜索框實時搜索、窗口大小調整事件
問題：頻繁觸發事件導致性能問題（如每輸入一個字符就請求API）
解決方案：延遲執行函數，在用戶停止操作后再執行

<input type="text" id="search-input" placeholder="搜索..."><script>const searchInput = document.getElementById('search-input');function search(query) {console.log('搜索:', query);// 這里發送API請求}// 使用防抖包裝搜索函數，延遲300ms執行const debouncedSearch = debounce(search, 300);searchInput.addEventListener('input', e => {debouncedSearch(e.target.value);});
</script>

4. 節流（Throttle）

應用場景：滾動加載更多、按鈕防雙擊
問題：短時間內頻繁觸發同一操作（如滾動事件每秒觸發幾十次）
解決方案：限制函數執行頻率，例如每200ms執行一次

function loadMoreData() {console.log('加載更多數據...');// 從API加載更多內容
}// 使用節流包裝加載函數，每200ms最多執行一次
const throttledLoad = throttle(loadMoreData, 200);window.addEventListener('scroll', () => {// 檢查是否滾動到頁面底部if (window.innerHeight + window.scrollY >= document.body.offsetHeight - 200) {throttledLoad();}
});

5. 圖片懶加載

應用場景：電商商品列表、文章配圖
問題：首屏加載大量圖片導致加載緩慢
解決方案：只在圖片進入視口時才加載

<!-- 使用data-src存儲真實圖片地址 -->
<img data-src="https://example.com/image.jpg" alt="商品圖片" class="lazy-load"><script>document.addEventListener('DOMContentLoaded', () => {const lazyImages = document.querySelectorAll('img.lazy-load');const imgObserver = new IntersectionObserver((entries, observer) => {entries.forEach(entry => {if (entry.isIntersecting) {const img = entry.target;img.src = img.dataset.src;img.classList.add('loaded');observer.unobserve(img);}});});lazyImages.forEach(img => imgObserver.observe(img));});
</script>

6. Web Workers

應用場景：復雜數據計算（如大數據可視化、PDF渲染）
問題：耗時計算阻塞主線程導致頁面卡頓
解決方案：將計算任務放到Web Worker中執行

// main.js - 主線程代碼
function processLargeData() {const worker = new Worker('data-worker.js');// 監聽worker返回的結果worker.onmessage = function(e) {console.log('處理后的數據:', e.data);// 更新UI};// 發送大數據到worker處理const largeDataSet = Array(1000000).fill().map((_, i) => i);worker.postMessage(largeDataSet);
}// data-worker.js - 獨立的worker文件
self.onmessage = function(e) {const data = e.data;const processedData = data.filter(num => num % 2 === 0); // 過濾偶數self.postMessage(processedData);
};

7. requestAnimationFrame

應用場景：平滑滾動、SVG動畫、游戲
問題：使用setTimeout/setInterval實現動畫會導致幀率不穩定
解決方案：使用requestAnimationFrame實現平滑動畫

function animateScrollToTop() {const scrollToTop = () => {const currentPosition = window.scrollY;if (currentPosition > 0) {window.scrollTo(0, currentPosition - Math.max(20, currentPosition / 10));requestAnimationFrame(scrollToTop);}};requestAnimationFrame(scrollToTop);
}// 綁定到返回頂部按鈕
document.getElementById('back-to-top').addEventListener('click', animateScrollToTop);

8. 循環優化

應用場景：處理大量數據（如表格渲染、數據分析）
問題：循環中重復計算數組長度影響性能
解決方案：提前緩存數組長度

// 未優化：每次循環都計算array.length
for (let i = 0; i < array.length; i++) {// 處理邏輯
}// 優化：緩存數組長度
const length = array.length;
for (let i = 0; i < length; i++) {// 處理邏輯
}// 更簡潔的寫法（適用于不需要逆向遍歷的場景）
for (let i = array.length; i--;) {// 處理邏輯（注意循環方向是從后往前）
}

9. Map替代對象進行高效查找

應用場景：需要頻繁查找數據的場景（如用戶信息查詢、配置項讀取）
問題：使用對象進行大量查找操作時性能較差
解決方案：使用Map數據結構提高查找效率

// 使用對象存儲用戶信息
const usersObj = {'1001': { name: '張三', age: 25 },'1002': { name: '李四', age: 30 },'1003': { name: '王五', age: 28 }
};// 使用Map存儲用戶信息
const usersMap = new Map();
usersMap.set('1001', { name: '張三', age: 25 });
usersMap.set('1002', { name: '李四', age: 30 });
usersMap.set('1003', { name: '王五', age: 28 });// 查找操作對比
console.time('Object查找');
console.log(usersObj['1002']); // 輸出: { name: '李四', age: 30 }
console.timeEnd('Object查找'); // 約0.02msconsole.time('Map查找');
console.log(usersMap.get('1002')); // 輸出: { name: '李四', age: 30 }
console.timeEnd('Map查找'); // 約0.005ms（性能提升約4倍）

10. CSS硬件加速

應用場景：實現平滑過渡效果（如側邊欄滑入、懸浮動畫）
問題：直接修改元素的left/top屬性會觸發重排
解決方案：使用transform屬性觸發GPU加速

.sidebar {position: fixed;left: -300px;width: 300px;height: 100%;transition: transform 0.3s ease-out; /* 使用transform替代left */
}.sidebar.open {transform: translateX(300px); /* 觸發GPU加速 */
}

// 切換側邊欄狀態
document.getElementById('toggle-sidebar').addEventListener('click', () => {document.querySelector('.sidebar').classList.toggle('open');
});

通過這些具體的應用場景，你可以根據項目需求選擇合適的優化技術，有效提升網頁性能和用戶體驗。