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 提供「左重」檢視，將所有類似的呼叫堆疊群組在一起。

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

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