告別 JS 分析器，使用「效能」面板剖析 CPU

Jecelyn Yeen
Nancy Li
Nancy Li
LinkedIn

JavaScript 分析器面板將從 Chrome 124 中移除。往後，請使用「效能」面板分析 Node.js CPU 效能。

為什麼要淘汰 JavaScript 分析器？(JS 分析器)

早在 Chrome 58 版，DevTools 團隊就已計劃逐步淘汰 JS 分析器。原因如下：

  • 已停止開發。JS Profiler 幾年來未收到任何重大更新，且團隊沒有資源繼續開發。
  • 更精簡的設定檔體驗。效能面板已用於各種效能分析，且可在 Node.js 中分析 JavaScript CPU 效能，因此將所有內容整合在一個地方，可確保一致性和效率。
  • 成效面板更勝一籌。我們會持續改善這項工具，加入新功能並進行強化，讓這項工具成為更強大且易於使用的成效分析工具。

淘汰後該怎麼辦？

如要進一步瞭解如何剖析 JavaScript CPU 效能，請參閱「剖析 Node.js 效能」。

以下是使用「成效」面板的訣竅：

  • 使用火焰圖找出效能瓶頸。

火焰圖。

  • 使用「由下而上」和「呼叫樹狀結構」分頁，瞭解函式之間的關係。

「由下而上」分頁。

「呼叫樹狀結構」分頁。

我們該如何處理淘汰問題？

我們開發了原型，並在 GitHub 上公開發布「要求評論」(RFC)，以便尋求開發人員的意見回饋。

此外，我們也會主動與開發人員專家聯絡，請他們測試原型，解決任何疑慮或問題，確保「Performance」面板符合核心設定檔需求。

我們將分 4 個階段逐步淘汰 JS Profiler，讓開發人員有足夠的時間調整及採用。

主要問題及修正方式

在我們收到的意見回饋中，最迫切的疑慮集中在以下三個主要問題：

  • 支援 .cpuprofile 檔案格式。JS Profiler 使用其他檔案格式。效能面板應該支援這項功能。
  • 載入速度緩慢。面板的載入速度似乎較慢，會干擾剖析程序。
  • 缺少 JavaScript VM 選取器。缺少 JavaScript VM 執行個體選取器，在某些情況下會限制剖析功能。

讓我們來看看這些問題，並瞭解我們如何解決。

載入速度緩慢

開發人員表示「Performance」面板載入大型資料檔案的時間過長，有時甚至會當機。

我們使用開發人員工具分析開發人員工具 (我們稱之為「開發人員工具上的開發人員工具」)。我們發現了問題並進行了幾項最佳化調整：

  • 將 Set 替換為 Array 資料結構。
  • 移除不必要的 Map 資料結構。
  • 將遞迴函式重構為迴圈 (for 迴圈)，以減少記憶體堆疊用量。

修正這些瓶頸後，大型檔案的載入速度提高了 80%！🎉

如要進一步瞭解我們在這個網誌文章中所學到的知識，請參閱「透過 perf-ception 讓效能資訊面板加快 400%」一文。

缺少 JavaScript VM 選取器

初始原型缺少 JavaScript VM 選取器。開發人員可使用這項工具深入研究，並專注於分析特定 VM 執行個體。

我們已在「效能」面板中新增 JavaScript VM 選取器。畫面上會顯示下拉式清單，列出所有可用的 JavaScript VM 執行個體。選取執行個體後，「效能」面板會載入該特定執行個體的 CPU 設定檔。

「呼叫樹狀結構」分頁。

支援 cpuprofile 檔案格式

先前「Performance」面板只支援追蹤記錄檔，也就是包含追蹤事件陣列的 JSON 檔案。

另一方面，JS Profiler 支援 CPU 設定檔，也就是含有 JSON 物件的 .cpuprofile 副檔名的檔案。如下所示：

{
    // The list of profile nodes. First item is the root node.
    nodes: ProfileNode[];
    // Profiling start timestamp in microseconds.
    startTime: number;
    // Profiling end timestamp in microseconds.
    endTime: number;
    // Ids of samples at top nodes.
    samples?: integer[];
    // Time intervals between adjacent samples in microseconds.
    // The first delta is relative to the profile startTime.
    timeDeltas?: integer[];
}

新的工作流程不應阻止開發人員分析現有的 cpuprofile。因此，效能面板現在支援追蹤記錄檔和 CPU 分析。您可以將 cpuprofile 檔案匯入Performance，檔案就會正確載入。

在幕後，我們會使用規則運算式來偵測物件結構差異。如果檔案內容開頭為 {"nodes":[，則表示該檔案為 CPU 設定檔。否則，則是追蹤記錄檔。

系統會在辨識內容類型後，據此處理內容。針對追蹤記錄檔，我們會剖析事件並建立時間軸。針對 CPU 設定檔，我們會剖析 JSON 物件並建立火焰圖。

結論

使用「Performance」面板，即可針對網站和 Node.js 和 Deno 應用程式中的 CPU 效能，享有更流暢的剖析體驗。

如有任何意見回饋或建議，請在這個錯誤中新增註解，或透過下列任一方式與我們聯絡。

下載預覽管道

建議您將 Chrome Canary、開發人員版或Beta 版設為預設開發人員版瀏覽器。這些預覽管道可讓您存取最新的 DevTools 功能，測試最新的網路平台 API，並在使用者發現問題前，協助您找出網站的問題！

與 Chrome 開發人員工具團隊聯絡

請使用下列選項討論新功能、更新或任何與開發人員工具相關的內容。