JavaScript 效能分析 (Performance Profiling)
Visual Studio Code 支援為 JavaScript 程式收集並檢視效能分析資料。若要開始使用，您首先需要為您的 Node.js 程式或瀏覽器應用程式配置偵錯工具。
分析類型
根據您想要優化的目標，您可以選擇不同類型的分析方式。
- CPU 分析 (CPU Profile) - CPU 分析會告訴您程式在執行 JavaScript 時耗費的時間。請記住，雖然您可以等待非同步的 Promise 或回呼函式 (callback)，但一次只會執行一個 JavaScript 表達式。CPU 分析每秒約收集 10,000 個樣本，以告訴您在該時刻正在執行哪個表達式（如果有的話）。
- 堆積分析 (Heap Profile) - 堆積分析會告訴您程式中記憶體隨時間變化的配置情形。配置記憶體可能需要耗費較高的成本，減少程式碼配置的記憶體量可以提升效能。
- 堆積快照 (Heap Snapshot) - 堆積快照是程式在某一瞬間配置記憶體情形的檢視。如果您發現程式佔用了大量 RAM 並想找出原因，堆積快照會很有用。請注意，收集堆積快照對於複雜的程式可能需要幾分鐘的時間，且目前的內建編輯器尚不支援檢視堆積快照。
收集分析資料
若要收集分析資料，您需要處於程式的偵錯模式中。一旦進入偵錯狀態，您可以透過幾種方式收集分析資料：
- 使用呼叫堆疊 (Call Stack) 檢視中的「錄製 (record)」按鈕。這可以讓您進行 CPU 分析、堆積分析以及堆積快照。
- 在程式中呼叫
console.profile()。這將會收集 CPU 分析資料。
使用錄製按鈕
進入偵錯狀態後，切換至「執行與偵錯 (Run and Debug)」檢視（⇧⌘D (Windows, Linux Ctrl+Shift+D)），並找到呼叫堆疊 (Call Stack) 檢視。將滑鼠游標懸停在您想要偵錯的對話階段上，並選取執行效能分析 (Take Performance Profile) 按鈕。您也可以從命令面板（⇧⌘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 檔案。當您開啟其中一個檔案時，首先會看到類似下圖的表格檢視：
這是程式的由下而上 (bottom-up) 檢視。每一列代表程式中的一個函式，預設會依據該函式所花費的時間進行排序。這也稱為「自身時間 (Self Time)」。函式的「總時間 (Total Time)」是指在該函式及其所呼叫的所有函式中花費的總和時間。您可以展開每個表格列，查看該函式是從哪裡被呼叫的。
例如，請參考以下程式碼：
function a() {
doSomethingFor5Seconds();
b();
}
function b() {
doSomethingFor3Seconds();
}
a();
在此案例中，a 的自身時間為 5 秒，而 a 的總時間為 8 秒。函式 b 的自身時間與總時間皆為 3 秒。堆積分析的運作方式相同，但會使用「自身大小 (Self Size)」和「總大小 (Total Size)」來標示每個函式或其被呼叫者所配置的記憶體量。
火焰圖檢視 (Flame view)
表格檢視在某些情況下很有用，但通常您可能希望看到更具視覺化的分析呈現。您可以點擊表格檢視右上角的火焰 🔥 圖示來達成。如果您尚未安裝，系統將提示您安裝一個提供火焰圖編輯器的額外擴充功能。
初次看到可能會覺得困惑，但別擔心，我們來解釋一下！
對於 CPU 分析，水平軸是分析的時間軸，讓您可以查看程式在每個時刻的操作。對於堆積分析，水平軸則是程式所配置的總記憶體量。
圖表中的每個長條（或稱「火焰」）都是一個呼叫堆疊。最外層、最頂層的函式呼叫（或稱呼叫堆疊的「底部」）顯示在編輯器的頂部，而其呼叫的函式則顯示在下方。長條的寬度由其總時間或總記憶體決定。
您可以點擊火焰圖中的項目以檢視詳細資訊，並使用滑鼠滾輪進行縮放。如果您已放大，也可以在圖表上的任何位置進行拖曳以進行瀏覽。
左重檢視 (Left-heavy view)
如果您正在處理 CPU 分析資料，您看到的火焰圖可能不如上述那樣直觀。您可能會看到許多個別的呼叫堆疊，看起來像這樣：
為了便於分析，VS Code 提供了一種「左重 (left-heavy)」檢視，將所有相似的呼叫堆疊分組在一起。
這會將檢視方式從時間順序切換為類似堆積分析的模式。水平軸仍然是總分析持續時間，但每個長條代表該函式呼叫在所有從該堆疊被呼叫時的總時間。
此檢視對於某些應用程式（例如伺服器）非常有用，在這些應用程式中，個別呼叫可能相對快速，但您希望找出在多次呼叫中最消耗效能的整體函式。