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 提供了“左側優先”檢視，將所有類似的呼叫堆疊分組在一起。
這會將分析從按時間順序的檢視切換到更類似於堆分析的檢視。橫軸仍然是分析的總持續時間，但每個條形代表該函式呼叫在所有從該堆疊呼叫它的時間內的總時間。
此檢視對於某些應用程式（例如伺服器）非常有用，在這些應用程式中，單個呼叫可能相對較快，但您想了解在多次呼叫中總體上成本最高的函式是什麼。