JavaScript 效能分析

Visual Studio Code 支援收集和檢視 JavaScript 程式的效能設定檔。若要開始使用，您首先需要為您的 Node.js 程式或 瀏覽器應用程式設定偵錯工具。

設定檔類型

根據您想要最佳化的內容，您可能需要採取不同種類的設定檔。

• CPU 設定檔 - CPU 設定檔會告訴您您的程式在 JavaScript 中花費時間的位置。請記住，雖然您可以等待非同步 Promise 或回呼，但一次只會執行一個 JavaScript 運算式。CPU 設定檔每秒收集約 10,000 個樣本，以告訴您目前正在執行哪個運算式 (如果有的話)。
• 堆積設定檔 - 堆積設定檔會告訴您程式中記憶體如何隨時間配置。配置記憶體可能成本高昂，而減少程式碼配置的記憶體量可以帶來效能提升。
• 堆積快照 - 堆積快照是程式已配置記憶體位置的即時檢視。如果您注意到您的程式正在使用大量 RAM，並想找出其來源，堆積快照可能會很有用。請注意，對於更複雜的程式，收集堆積快照可能需要幾分鐘的時間，而且內建編輯器目前不支援檢視堆積快照。

收集設定檔

若要收集設定檔，您需要偵錯您的程式。一旦您完成後，您可以透過幾種方法收集設定檔

• 使用呼叫堆疊檢視中的「錄製」按鈕。這可讓您取得 CPU 設定檔、堆積設定檔和堆積快照。
• 透過在您的程式中呼叫 console.profile()。這將會收集 CPU 設定檔。

使用錄製按鈕

一旦您開始偵錯，切換到執行和偵錯檢視 (⇧⌘D (Windows、Linux Ctrl+Shift+D))，並找到呼叫堆疊檢視。將滑鼠游標停留在您想要偵錯的工作階段上方，然後選取取得效能設定檔按鈕。您也可以從命令面板 (⇧⌘P (Windows、Linux Ctrl+Shift+P)) 執行此命令。

然後，VS Code 會詢問您想要取得哪種效能設定檔類型；選擇與您相關的類型。

最後，VS Code 會詢問您何時要停止取得設定檔。您可以選擇

• 取得設定檔直到您手動停止為止。
• 取得設定檔一段設定的持續時間。
• 取得設定檔直到您命中特定中斷點為止。

如果您選擇第一個選項，您可以按一下偵錯工具列中顯示的大紅色「錄製」圖示來停止設定檔。收集設定檔後，設定檔檢視器將會自動開啟。

使用 console.profile

您可以使用對 console.profile 的呼叫手動檢測您的程式碼以啟動設定檔，並使用 console.profileEnd 停止設定檔。CPU 設定檔將會在這兩個呼叫站點之間收集。

console.profile();
doSomeVeryExpensiveWork();
console.profileEnd();

產生的 .cpuprofile 將會自動儲存在您的工作區資料夾中。您可以選取該檔案以在內建的 設定檔檢視器中開啟它。

分析設定檔

表格檢視

VS Code 具有整合的視覺化工具，支援檢視 JavaScript .cpuprofile 和 .heapprofile 檔案。當您開啟其中一個檔案時，您首先會看到一個表格檢視，如下所示

這是您程式的由下而上檢視。每一列代表您程式中的一個函式，預設情況下，它們會依在該特定函式中花費的時間量排序。這也稱為「自身時間」。「總時間」函式是在該函式及其呼叫的所有函式中花費的時間總和。您可以展開每個表格列，以查看該函式是從何處呼叫的。

例如，以下列程式碼為例

function a() {
  doSomethingFor5Seconds();
  b();
}

function b() {
  doSomethingFor3Seconds();
}

a();

在這種情況下，a 的自身時間為 5 秒，而 a 的總時間為 8 秒。b 的自身時間和總時間均為 3 秒。堆積設定檔的運作方式相同，但使用自身大小和總大小來指示在每個函式或其被呼叫者中配置的記憶體量。

火焰圖檢視

表格檢視在某些情況下很好用，但通常您可能想要查看設定檔的更視覺化表示。您可以透過按一下表格檢視右上角的火焰 🔥 圖示來執行此操作。如果您尚未安裝，系統會提示您安裝提供火焰圖檢視編輯器的其他擴充功能。

這最初看起來可能令人困惑，但別擔心，我們會弄清楚它的意義！

對於 CPU 設定檔，水平軸是設定檔的時間軸，可讓您查看程式在每個時間點執行的操作。對於堆積設定檔，水平軸是程式配置的總記憶體。

圖表中的每個長條或「火焰」都是呼叫堆疊。最外層、最上層的函式呼叫 (或呼叫堆疊的「底部」) 顯示在編輯器的頂端，而它呼叫的函式則顯示在下方。長條的寬度由其總時間或總記憶體決定。

您可以按一下火焰圖中的項目以檢視有關它的更多資訊，並且可以使用滑鼠滾輪放大和縮小。如果您已放大，您也可以在圖表上的任何位置拖曳以進行導覽。

左重檢視

如果您正在使用 CPU 設定檔，您看到的火焰圖很有可能不像上面的那樣容易理解。您可能有許多看起來像這樣的個別呼叫堆疊

為了更輕鬆地分析，VS Code 設定檔會提供「左重」檢視，將所有類似的呼叫堆疊群組在一起。

這會從設定檔的依時間順序檢視切換到更類似堆積設定檔的檢視。水平軸仍然是設定檔總持續時間，但每個長條代表從該堆疊呼叫的所有次數中該函式呼叫的總時間。

此檢視對於某些應用程式 (例如伺服器) 更有用，在這些應用程式中，個別呼叫可能相對較快，但您想要找出跨多個調用整體成本最高的函式是什麼。