JavaScript 效能分析

Visual Studio Code 支援為 JavaScript 程式收集和檢視效能分析檔案。要開始使用，您首先需要為您的 Node.js 程式或瀏覽器應用配置好偵錯程式。

分析檔案型別

根據您想要最佳化的內容，您可能需要採集不同型別的分析檔案。

• CPU 分析檔案 (CPU Profile) - CPU 分析檔案可以告訴您程式在 JavaScript 中花費了多少時間。請記住，雖然您可以等待非同步的 promise 或回撥，但同一時間只有一個 JavaScript 表示式在執行。CPU 分析會以每秒約 10,000 次的頻率進行取樣，以告訴您在那個時刻哪個表示式（如果有的話）正在執行。
• 堆分析檔案 (Heap Profile) - 堆分析檔案可以告訴您程式中的記憶體是如何隨時間分配的。分配記憶體的開銷可能很大，減少程式碼分配的記憶體量可以帶來效能上的提升。
• 堆快照 (Heap Snapshot) - 堆快照是程式記憶體分配情況的一個瞬時檢視。如果您注意到程式佔用了大量 RAM，並想找出其來源，堆快照會很有用。請注意，對於更復雜的程式，收集堆快照可能需要幾分鐘時間，並且內建編輯器目前不支援檢視堆快照。

採集分析檔案

要採集分析檔案，您需要正在除錯您的程式。一旦開始除錯，您可以透過以下幾種方法來採集分析檔案：

• 使用呼叫堆疊 (Call Stack) 檢視中的“錄製”按鈕。這允許您採集 CPU 分析檔案、堆分析檔案和堆快照。
• 在您的程式中呼叫 console.profile()。這將採集一份 CPU 分析檔案。

使用錄製按鈕

開始除錯後，切換到“執行和除錯”檢視（⇧⌘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)”來表示每個函式或其被呼叫者分配的記憶體量。

火焰圖檢視

表格檢視在某些情況下很方便，但通常您可能希望看到更直觀的分析檔案展示。您可以透過點選表格檢視右上角的火焰圖示 🔥 來實現。如果您尚未安裝，系統會提示您安裝一個提供火焰圖檢視編輯器的附加擴充套件。

這起初可能看起來令人困惑，但別擔心，我們會把它弄明白的！

對於 CPU 分析檔案，水平軸是分析的時間線，讓您可以看到程式在每個時刻在做什麼。對於堆分析檔案，水平軸是程式分配的總記憶體。

圖中的每個條形，或稱“火焰”，都是一個呼叫堆疊。最外層、最頂層的函式呼叫（即呼叫堆疊的“底部”）顯示在編輯器的頂部，而它呼叫的函式則顯示在下方。條形的寬度由其總耗時或總記憶體決定。

您可以點選火焰圖中的條目以檢視更多相關資訊，並使用滑鼠滾輪進行縮放。如果您已經放大，也可以在圖表上任意位置拖動來導航。

左偏檢視

如果您正在處理 CPU 分析檔案，您看到的火焰圖很可能不像上面那個那麼容易理解。您可能會有很多獨立的呼叫堆疊，看起來像這樣：

為了便於分析，VS Code 提供了“左偏 (left-heavy)”檢視，它將所有相似的呼叫堆疊分組到一起。

這將檢視從按時間順序排列切換到更類似於堆分析檔案的形式。水平軸仍然是總分析時長，但每個條形代表該函式呼叫在所有從該堆疊呼叫時的總耗時。

這種檢視對於某些應用（如伺服器）非常有用，因為單個呼叫可能相對較快，但您想找出在多次呼叫中總體上開銷最大的函式是哪些。