---

前言

性能優化的重要性

在當今數字化時代，Web 應用已成為人們生活和工作中不可或缺的一部分。而 JavaScript 作為 Web 開發的核心語言，其性能優劣直接決定了用戶體驗的好壞。想象一下，當你滿心期待地打開一個網頁，卻遭遇長時間的加載等待，或者在操作過程中頁面頻繁卡頓，這種糟糕的體驗無疑會讓你對該應用失去耐心和好感。?
對于企業來說，性能問題可能導致用戶流失、業務受損。根據相關研究表明，網頁加載時間每增加一秒，用戶流失率可能會上升 7% ，轉化率也會大幅下降。而在搜索引擎排名方面，性能出色的網站往往更受青睞，能獲得更高的權重和曝光機會。此外，良好的性能優化還能降低服務器負載，節約運營成本。?
由此可見，JavaScript 性能優化絕非可有可無，而是關乎應用成敗的關鍵因素。接下來，本文將通過一系列真實的實戰案例，深入剖析性能瓶頸產生的原因，并詳細介紹針對性的優化方法，助你掌握提升 JavaScript 性能的核心技巧 。

---

一、常見性能瓶頸剖析

（一）重繪與重排?
在網頁渲染過程中，重繪（Repaint）和重排（Reflow，也稱為回流）是兩個重要概念，它們直接影響著 JavaScript 的性能。當元素的樣式改變但不影響其在文檔流中的位置和幾何形狀時，比如改變元素的顏色、背景、邊框等，瀏覽器會進行重繪，這個過程只需要重新繪制受影響的元素，無需重新計算布局 ，代價相對較小。然而，當元素的尺寸、布局或位置發生改變，如改變元素的寬度、高度、添加 / 刪除元素、改變窗口大小等操作時，瀏覽器需要重新計算文檔中元素的位置和大小，此為重排。重排是一個代價較高的操作，因為它不僅會影響當前元素及其子元素，甚至可能影響后續兄弟元素和祖先元素，瀏覽器需要重新計算布局，并重新繪制受影響的部分。?
頻繁的 DOM 操作是引發重繪和重排的常見原因。以一個簡單的列表為例，如果通過循環逐個修改列表項的樣式，每一次修改都可能觸發重排和重繪。如下面的代碼：

const listItems = document.querySelectorAll('li');
for (let i = 0; i < listItems.length; i++) {listItems[i].style.color = 'red';listItems[i].style.marginLeft = '10px';
}

在這個例子中，每次循環都對列表項的樣式進行了兩次修改，這會導致瀏覽器頻繁地進行重排和重繪，嚴重影響性能。?
（二）主線程阻塞?
JavaScript 是單線程語言，這意味著它在同一時間只能執行一個任務。在瀏覽器環境中，JavaScript 的執行與頁面渲染、用戶交互等都在主線程中進行。當主線程被一些復雜的計算任務或者大量的 DOM 操作占據時，就會導致主線程阻塞。例如，進行復雜的數學運算、解析龐大的 JSON 數據、頻繁地操作 DOM 元素等。?
假設我們有一個計算斐波那契數列的函數：

function fibonacci(n) {if (n <= 1) return n;return fibonacci(n - 1) + fibonacci(n - 2);
}// 進行大量的斐波那契數列計算，阻塞主線程
for (let i = 0; i < 40; i++) {fibonacci(i);
}

在上述代碼中，fibonacci函數是一個遞歸函數，計算過程非常耗時。當在循環中多次調用該函數時，會使主線程長時間處于忙碌狀態，導致頁面無法及時響應用戶的操作，如點擊按鈕、滾動頁面等，給用戶帶來極差的體驗。?
（三）內存泄漏?
內存泄漏指的是程序中已分配的內存由于某種原因無法被釋放，導致內存占用不斷增加，最終可能影響程序的性能甚至導致程序崩潰。在 JavaScript 中，常見的內存泄漏場景有閉包濫用、未移除事件監聽器等。?
當閉包被不當使用時，就可能引發內存泄漏。例如：

function outerFunction() {const largeData = new Array(1000000);  // 占用大量內存的數據return function innerFunction() {console.log(largeData.length);};
}const closure = outerFunction();  // 這里形成閉包，即使outerFunction執行完畢，largeData也無法被回收

在這個例子中，outerFunction返回的innerFunction形成了閉包，它引用了outerFunction中的largeData。即使outerFunction執行完畢，largeData仍然被innerFunction引用，從而無法被垃圾回收機制回收，造成內存泄漏。?
另外，在為 DOM 元素添加事件監聽器后，如果在元素被移除時沒有手動移除對應的事件監聽器，也會導致內存泄漏。例如：

const button = document.createElement('button');
button.addEventListener('click', function clickHandler() {console.log('Button clicked');
});
document.body.appendChild(button);// 后續移除按鈕，但未移除事件監聽器
document.body.removeChild(button);

在上述代碼中，按鈕被從頁面移除后，其點擊事件監聽器仍然存在于內存中，并且持有對按鈕 DOM 元素的引用，導致按鈕及其相關資源無法被回收，造成內存泄漏。

二、實戰案例與優化方案

（一）DOM 操作優化案例?

在 Web 開發中，動態渲染長列表是一個常見的需求。但如果處理不當，就會引發嚴重的性能問題。假設我們要在頁面上渲染一個包含 10000 條數據的列表，以下是一段可能的低效代碼：

const data = Array.from({ length: 10000 }, (_, i) => `Item ${i}`);
const list = document.getElementById('list');
data.forEach(item => {list.innerHTML += `<li>${item}</li>`;
}