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

Jecelyn Yeen
Nancy Li
Nancy Li
LinkedIn

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

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

自 Chrome 58 起，開發人員工具團隊計劃最終淘汰 JS 分析器。原因如下：

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

淘汰後該怎麼做？

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

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

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

火焰圖。

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

「由下而上」分頁。

「Call Tre」(呼叫樹狀結構) 分頁。

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

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

此外，我們也會主動聯絡開發人員專家來測試原型設計，處理任何疑慮或問題，確保「效能」面板符合核心剖析需求。

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

主要問題及修正方式

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

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

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

載入速度緩慢

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

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

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

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

請參閱這篇網誌文章，進一步瞭解我們所學到的知識：透過 perf-ception，讓「成效」面板的速度提升 400%。

缺少 JavaScript VM 選取器

初始原型缺少 JavaScript VM 選取器。開發人員可以藉此深入瞭解特定 VM 執行個體。

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

「呼叫樹狀結構」分頁。

支援 cpuprofile 檔案格式

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

另一方面，JS Profiler 支援的 CPU 設定檔是具有 .cpuprofile 副檔名的檔案，內含 JSON 物件。看起來會像這樣：

{
    // 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 開發人員工具團隊聯絡

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