Chrome 124 版即將淘汰「JavaScript 分析器」面板。往後請使用「效能」面板剖析 Node.js CPU 效能。
為什麼要淘汰 JavaScript 分析器？(JS 分析器)
開發人員工具團隊最快從 Chrome 58 版開始，便計劃最終淘汰 JS 分析器。可能的原因如下：
- 目前已停止開發。JS 分析器幾年內未收到任何重大更新，團隊也沒有能夠繼續開發這類工具的資源。
- 更精簡的剖析體驗。「效能」面板已用於各種效能分析，且具備在 Node.js 中剖析 JavaScript CPU 效能的功能。因此，建議您將所有項目集中於一處，以便確保一致性與效率。
- 「效能」面板使用效果較佳。我們不斷加入新功能和改善項目，讓這個工具的功能更強大，也更容易使用。
淘汰後應採取哪些行動？
如要進一步瞭解如何剖析 JavaScript CPU 效能，請參閱「剖析 Node.js 效能」。
以下是使用「效能」面板的一些提示：
- 使用火焰圖找出效能瓶頸。
- 使用「Bottom-up」和「Call tree」分頁，瞭解各個函式之間的關係。
如何處理淘汰作業？
我們開發出原型，並在 GitHub 上公開發布 Request for Comments (RFC)，以便參考開發人員的意見。
此外，我們會主動與開發人員專家聯絡，針對原型進行測試，並解決任何疑慮或問題，確保「效能」面板可滿足核心剖析需求。
我們將在 4 個階段中逐步停用 JS 分析器，讓開發人員有足夠時間進行調整與採用。
重要問題及我們修正方式
在我們收到的意見回饋中，最迫切的疑慮以三個主要問題為中心：
- 支援
.cpuprofile檔案格式。JS 分析器使用的是其他檔案格式。「Performance」面板應支援該面板。 - 載入速度過慢。面板的載入速度似乎很慢，並會幹擾剖析程序。
- 缺少 JavaScript VM 選取器。在某些情況下，缺少 JavaScript VM 執行個體選取器的剖析功能有限。
我們將逐一探討這些問題，並瞭解我們如何解決這些問題。
載入速度緩慢
開發人員告訴我們，「效能」面板載入大型資料檔案的時間過長，有時甚至會當機。
我們使用開發人員工具分析開發人員工具 (我們稱之為「DevTools-on-DevTools」)。我們發現了問題，並進行了幾項最佳化調整：
- 已將
Set改成Array資料結構。 - 已移除不必要的
Map資料結構。 - 將遞迴函式重構為疊代 (適用於迴圈)，以減少記憶體堆疊用量。
修正了這些瓶頸後，大型檔案的載入速度加快了 80%！🎉
如要進一步瞭解我們學到的知識，請參閱這份網誌文章：運用效能提升 400% 的績效面板速度加快 400%。
缺少 JavaScript VM 選取器
初始原型缺少 JavaScript VM 選取器。開發人員可以使用這個 API 來細查，並專注於分析特定 VM 執行個體。
我們已將 JavaScript VM 選取器新增至「Performance」面板。畫面上會顯示下拉式清單，列出所有可用的 JavaScript VM 執行個體。選取執行個體後，「Performance」面板會載入該特定執行個體的 CPU 設定檔。
支援 cpuprofile 檔案格式
「效能」面板先前僅支援追蹤追蹤檔，這類檔案是含有追蹤記錄事件陣列的 JSON 檔案。
另一方面，JS 分析器支援 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。因此，「Performance」(效能) 面板現在同時支援追蹤檔和 CPU 設定檔。您可以將 cpuprofile 檔案匯入「Performance」中，檔案就會正確載入。
在背景，我們利用規則運算式來偵測物件結構的差異。如果檔案內容開頭為 {"nodes":[，表示這是 CPU 設定檔。如果是追蹤檔，則會是追蹤檔。
一旦發現內容類型，我們就會據此處理。如果是追蹤檔，我們會剖析事件並建立時間軸。針對 CPU 設定檔，我們剖析 JSON 物件並建立火焰圖。
結論
使用「Performance」面板即可更輕鬆地剖析網站，以及剖析 Node.js 和 Deno 應用程式中的 CPU 效能。
如有任何意見或建議，請在這項錯誤中新增留言，或使用下列其中一個選項與我們聯絡。
下載預覽管道
考慮使用 Chrome Canary 版、開發人員版或 Beta 版做為預設開發瀏覽器。這些預覽管道可讓您存取開發人員工具的最新功能、測試最先進的網路平台 API，並在使用者使用之前就在網站上發現問題！
與 Chrome 開發人員工具團隊聯絡
使用下列選項，討論文章的新功能和異動，以及其他與開發人員工具相關的事項。
- 請透過 crbug.com 提交建議或意見回饋。
- 如要回報開發人員工具的問題，請在開發人員工具中依序點選「更多選項」圖示
>「說明」 >「回報開發人員工具的問題」。 - 在 @ChromeDevTools 張貼推文。
- 歡迎對開發人員工具的 YouTube 影片或開發人員工具秘訣 (YouTube 影片) 提供意見。