作為一名開發(fā)人員，我發(fā)現(xiàn)優(yōu)化 JavaScript 效能對於創(chuàng)建響應(yīng)靈敏且高效的 Web 應(yīng)用程式至關(guān)重要。多年來，我探索了各種技術(shù)來分析和提高程式碼的效能。以下是我成功使用過的七種強大方法：

瀏覽器開發(fā)工具是效能分析的寶貴資源。我經(jīng)常使用 Chrome DevTools 來分析我的 Web 應(yīng)用程式。效能面板提供了有關(guān)載入時間、CPU 使用率和記憶體消耗的大量資訊。要開始分析，我打開 DevTools，導(dǎo)航到“效能”選項卡，然後單擊“記錄”按鈕。與我的應(yīng)用程式互動後，我停止錄製並檢查結(jié)果。

性能面板中的火焰圖特別有用。它向我展示了哪些函數(shù)執(zhí)行時間最長。我可以放大圖表的特定區(qū)域來查看函數(shù)呼叫及其持續(xù)時間的詳細(xì)細(xì)分。這可以幫助我識別程式碼中的瓶頸，否則我可能不會注意到。

我發(fā)現(xiàn)另一個有用的功能是網(wǎng)路面板。它允許我查看每個資源的載入時間，這對於優(yōu)化初始頁面載入時間至關(guān)重要。我可以模擬不同的網(wǎng)路條件，以確保我的應(yīng)用程式即使在較慢的連接上也能正常運作。

Lighthouse 是整合到 Chrome DevTools 的另一個強大工具。它提供對效能、可訪問性、漸進(jìn)式 Web 應(yīng)用程式等的自動審核。我經(jīng)常對我的 Web 應(yīng)用程式進(jìn)行 Lighthouse 審核，以全面了解其效能。

要使用 Lighthouse，我開啟 DevTools，前往 Lighthouse 選項卡，選擇我要審核的類別，然後按一下「產(chǎn)生報表」。產(chǎn)生的報告提供了我的申請的各個方面的分?jǐn)?shù)，並提供了具體的改進(jìn)建議。

Lighthouse 最有價值的功能之一是它能夠模擬行動裝置和較慢的網(wǎng)路連線。這有助於我確保我的應(yīng)用程式在各種裝置和網(wǎng)路條件下都能良好運作。

效能時間軸 API 是用於偵測程式碼和測量特定操作的強大工具。我用它來建立自訂效能條目，幫助我追蹤應(yīng)用程式關(guān)鍵部分的執(zhí)行時間。

以下是我如何使用 Performance Timeline API 的範(fàn)例：

performance.mark('startFunction');
// Complex function or operation
complexOperation();
performance.mark('endFunction');

performance.measure('functionDuration', 'startFunction', 'endFunction');

const measures = performance.getEntriesByType('measure');
console.log(measures[0].duration);

此程式碼在複雜操作的開始和結(jié)束時建立標(biāo)記，測量這些標(biāo)記之間的時間，並記錄持續(xù)時間。這是追蹤程式碼特定部分效能的簡單而有效的方法。

使用者計時 API 與效能時間軸 API 密切相關(guān)，並提供了一種將自訂計時資料新增至瀏覽器效能時間軸的方法。我發(fā)現(xiàn)它對於測量應(yīng)用程式中關(guān)鍵功能或進(jìn)程的持續(xù)時間特別有用。

以下是我如何使用 User Timing API 的範(fàn)例：

performance.mark('startFunction');
// Complex function or operation
complexOperation();
performance.mark('endFunction');

performance.measure('functionDuration', 'startFunction', 'endFunction');

const measures = performance.getEntriesByType('measure');
console.log(measures[0].duration);

此程式碼標(biāo)記進(jìn)程的開始和結(jié)束，測量這些標(biāo)記之間的時間，並記錄持續(xù)時間。這是獲取應(yīng)用程式特定部分的精確計時資訊的好方法。

Chrome Tracing 是一個更高級的工具，它允許我捕獲詳細(xì)的性能數(shù)據(jù)，以深入分析 JavaScript 的執(zhí)行和渲染。雖然它的使用比瀏覽器內(nèi)建的開發(fā)人員工具更複雜，但它提供了有關(guān)瀏覽器中發(fā)生的情況的前所未有的詳細(xì)資訊。

要使用 Chrome 跟蹤，我通常遵循以下步驟：

1. 開啟 Chrome 並導(dǎo)覽至 chrome://tracing
2. 點選「記錄」並選擇我要追蹤的類別
3. 與我的應(yīng)用程式互動
4. 停止記錄並分析結(jié)果

產(chǎn)生的追蹤檔案準(zhǔn)確地向我展示了瀏覽器在每毫秒執(zhí)行的操作，包括 JavaScript 執(zhí)行、佈局計算、繪製等。當(dāng)我嘗試優(yōu)化應(yīng)用程式中特別複雜或效能關(guān)鍵的部分時，這種詳細(xì)程度是非常寶貴的。

記憶體快照是 Chrome DevTools 的另一個強大功能，我用它來識別記憶體洩漏並分析物件保留模式。隨著時間的推移，記憶體洩漏可能會導(dǎo)致嚴(yán)重的效能問題，因此識別並修復(fù)它們至關(guān)重要。

要拍攝記憶體快照，我按照以下步驟操作：

1. 開啟 Chrome DevTools 並前往「記憶體」標(biāo)籤
2. 選擇「堆疊快照」並點選「拍攝快照」
3. 與我的應(yīng)用程式互動
4. 再拍一張快照
5. 比較快照以識別不必要保留的物件

這是一個可能導(dǎo)致記憶體洩漏的簡單程式碼範(fàn)例：

performance.mark('startProcess');
// Complex process
for (let i = 0; i < 1000000; i++) {
    // Some complex operation
}
performance.mark('endProcess');

performance.measure('processTime', 'startProcess', 'endProcess');

const measurements = performance.getEntriesByName('processTime');
console.log(`Process took ${measurements[0].duration} milliseconds`);

在這種情況下，即使 createLeak 執(zhí)行完畢，largeArray 仍保留在記憶體中，因為leak.someMethod 維護(hù)著對它的引用。內(nèi)存快照可以幫助我識別這個問題。

火焰圖是一種視覺化工具，我發(fā)現(xiàn)它對於理解 JavaScript 程式碼的執(zhí)行流程特別有用。它們向我展示了一段時間內(nèi)的呼叫堆疊，使我可以輕鬆查看哪些函數(shù)執(zhí)行時間最長。

當(dāng)您記錄效能時，Chrome DevTools 會自動產(chǎn)生火焰圖。 x 軸表示時間，y 軸顯示呼叫堆疊。圖表中的每個條形代表一個函數(shù)調(diào)用，條形的寬度表示函數(shù)執(zhí)行所需的時間。

我經(jīng)常使用火焰圖來識別經(jīng)常呼叫或需要很長時間執(zhí)行的函數(shù)。這有助於我將優(yōu)化工作集中在對整體效能影響最大的程式碼部分。

優(yōu)化 JavaScript 效能時，請務(wù)必記住，過早的最佳化可能會導(dǎo)致程式碼更加複雜、難以維護(hù)。我總是從編寫乾淨(jìng)、可讀的程式碼開始，然後使用這些分析技術(shù)來識別實際的瓶頸。

我發(fā)現(xiàn)特別有效的一項技術(shù)是延遲載入。這涉及推遲非關(guān)鍵資源的加載，直到需要它們?yōu)橹埂＿@是一個簡單的例子：

performance.mark('startFunction');
// Complex function or operation
complexOperation();
performance.mark('endFunction');

performance.measure('functionDuration', 'startFunction', 'endFunction');

const measures = performance.getEntriesByType('measure');
console.log(measures[0].duration);

此程式碼使用 Intersection Observer API 僅在圖像進(jìn)入視圖時載入圖像，從而顯著減少包含許多圖像的頁面的初始頁面載入時間。

我常用的另一種技巧是去抖。這對於頻繁呼叫的函數(shù)特別有用，例如用於捲動或調(diào)整大小的事件處理程序。這是一個例子：

performance.mark('startProcess');
// Complex process
for (let i = 0; i < 1000000; i++) {
    // Some complex operation
}
performance.mark('endProcess');

performance.measure('processTime', 'startProcess', 'endProcess');

const measurements = performance.getEntriesByName('processTime');
console.log(`Process took ${measurements[0].duration} milliseconds`);

此去抖函數(shù)可確保調(diào)整大小處理程序僅在使用者停止調(diào)整視窗大小 250 毫秒後運行，從而減少呼叫函數(shù)的次數(shù)。

當(dāng)涉及最佳化循環(huán)時，我發(fā)現(xiàn)使用像map、filter和reduce這樣的陣列方法通?？梢援a(chǎn)生比傳統(tǒng)for迴圈更可讀、有時更有效率的程式碼。這是一個例子：

let leak = null;

function createLeak() {
    const largeArray = new Array(1000000).fill('leaky');
    leak = {
        someMethod: () => {
            console.log(largeArray.length);
        }
    };
}

createLeak();

JavaScript 效能的另一個重要方面是有效管理非同步操作。 Promise 和 async/await 語法可以幫助使非同步程式碼更具可讀性並且更易於推理。這是一個例子：

function lazyLoad(element) {
    if ('IntersectionObserver' in window) {
        let observer = new IntersectionObserver((entries, observer) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    let img = entry.target;
                    img.src = img.dataset.src;
                    observer.unobserve(img);
                }
            });
        });
        observer.observe(element);
    } else {
        // Fallback for browsers that don't support IntersectionObserver
        element.src = element.dataset.src;
    }
}

// Usage
document.querySelectorAll('img[data-src]').forEach(lazyLoad);

此非同步函數(shù)使用 try/catch 進(jìn)行錯誤處理並等待非同步操作的結(jié)果，與巢狀回呼相比，使程式碼更易於閱讀和維護(hù)。

當(dāng)談到 DOM 操作時，我發(fā)現(xiàn)最小化直接操作和批次變更可以顯著提高效能。使用文件片段尤其有效：

function debounce(func, delay) {
    let timeoutId;
    return function (...args) {
        clearTimeout(timeoutId);
        timeoutId = setTimeout(() => func.apply(this, args), delay);
    };
}

// Usage
window.addEventListener('resize', debounce(() => {
    console.log('Window resized');
}, 250));

這種方法最大限度地減少了 DOM 更新的次數(shù)，這對於大量元素來說可以顯著提升效能。

總之，JavaScript 效能分析與最佳化是一個持續(xù)的過程。隨著 Web 應(yīng)用程式變得越來越複雜，定期評估和提高效能至關(guān)重要。我在這裡討論的技術(shù) - 從使用瀏覽器開發(fā)工具和 Lighthouse 到實現(xiàn)延遲加載和高效的 DOM 操作 - 在我的工作中非常寶貴。透過應(yīng)用這些方法並不斷學(xué)習(xí)新的效能最佳化技術(shù)，我們可以創(chuàng)建更快、更有效率的 Web 應(yīng)用程序，從而提供更好的使用者體驗。

---

101 本書

101 Books是一家由人工智慧驅(qū)動的出版公司，由作家Aarav Joshi共同創(chuàng)立。透過利用先進(jìn)的人工智慧技術(shù)，我們將出版成本保持在極低的水平——一些書籍的價格低至 4 美元——讓每個人都能獲得高品質(zhì)的知識。

查看我們的書Golang Clean Code，亞馬??遜上有售。

請繼續(xù)關(guān)注更新和令人興奮的消息。購買書籍時，搜尋 Aarav Joshi 以尋找更多我們的書籍。使用提供的連結(jié)即可享受特別折扣！

我們的創(chuàng)作

一定要看看我們的創(chuàng)作：

投資者中心 | 投資者中央西班牙語 | 投資者中德意志 | 智能生活 | 時代與迴響 | 令人費解的謎團(tuán) | 印度教 | 菁英發(fā)展 | JS學(xué)校

---

我們在媒體上

科技無尾熊洞察 | 時代與迴響世界 | 投資人中央媒體 | 令人費解的謎團(tuán) | | 令人費解的謎團(tuán) | |

令人費解的謎團(tuán) | | 令人費解的謎團(tuán) | >科學(xué)與時代媒介 | 現(xiàn)代印度教

以上是為開發(fā)者提供的強大 JavaScript 效能優(yōu)化技術(shù)的詳細(xì)內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！