縮短開發人員工具的啟動時間

馬克西姆.薩迪姆 (Maksim Sadym)
Maksim Sadym

開發人員工具的新創公司現在速度加快約 13% 🎉? (從 11.2 秒縮短至 10 秒)

重點摘要;結果就是移除多餘的序列化作業。

總覽

開發人員工具正在啟動,因此需要對 V8 JavaScript 引擎進行一些呼叫。

開發人員工具啟動程序

Chromium 用來將 DevTools 指令傳送至 V8 的機制稱為 mojo (一般而言適用於 IPC)。我的團隊成員 Benedikt MeurerSigurd Schneider 在處理其他工作時發現效率不佳,現在他們打算移除這些郵件收發方式的兩個多餘步驟,改善整個流程。

讓我們深入瞭解 mojo 機制的運作方式!

mojo 機制

Mojo 機制

有一個 mojo 指令 EvaluateScript 可執行 JS 指令。它會將包含 arguments 的整個 JS 指令序列化為 JavaScript 原始碼字串,且可以是 eval()。各位可能也想,這些字串變得很長、費用高昂。收到 V8 的指令後,這些 JavaScript 程式碼字串會在執行前取消序列化。對每則訊息進行序列化和還原序列化的程序會大幅增加負擔。

Benedikt Meurer 瞭解,arguments 的序列化和去序列化成本非常高昂,且整個「將 JS 指令轉至 JS 字串」「去序列化 JS 字串」步驟是多餘的步驟,因此可以略過。

技術詳細資料:RenderFrameHostImpl::ExecuteJavaScript

我們如何改善

改進機制

我們推出了另一種 mojo API 方法,讓我們直接傳遞物件名稱、要呼叫的方法以及引數清單,而不必建立 JavaScript 原始碼的字串。這可讓您略過序列化和反序列化程序,而且不需要剖析 JavaScript 程式碼。

如需我們如何實作這項最佳化技術的詳細資料,請參閱以下兩個修補程式:

  1. CL 2431864:[devtools] 減少前端訊息傳送的效能負擔
  2. CL 2442012:[devtools] 在開發人員工具中使用 ExecuteJavaScriptMethod

影響程度

為評估這項變更的成效,我們針對 Chromium 修訂版 cb971089a0584f213b39d581 (變更前後) 進行了一些評估。

針對這兩個修訂版本,我們執行了 5 次以下情境:

  1. 使用 chrome://tracing 錄製追蹤記錄
  2. 開啟開發人員工具
  3. 取得記錄的 CrRendererMain 追蹤記錄,並比較 V8 專用指標。

根據這些實驗結果,開發人員工具的最佳化速度速度提升約 13% (從 11.2 秒降低至 10 秒)

醒目顯示功能、CPU 持續時間

方法名稱 未最佳化 (毫秒) 最佳化 (毫秒) 差異 (毫秒) 速度提升 (%)
總計 11,213.19 9,953.99 人 -1,259.20 美元 12.65%
v8.run 歐元 3.61 -496.06 12.65%
V8.Execute 1,654.87 1,349.61 人 -305.25 3.07%
v8.callFunction 1,171.84 1,339.77 167.94 -1.69%
v8.compile 133.93 3.56 -130.37 1.31%

開發人員工具載入 CPU 作業時間 (毫秒)

完整追蹤指標比較表格

因此,開發人員工具的開啟速度會比使用較少 CPU 用量。🎉

下載預覽頻道

建議您使用 Chrome Canary開發人員版Beta 版做為預設開發瀏覽器。這些預覽管道可讓您使用最新的開發人員工具、測試最先進的網路平台 API,以及在使用者操作之前在網站上找出問題!

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

使用下列選項,在文章中討論新功能和異動,或與開發人員工具相關的任何其他內容。

  • 透過 crbug.com 提供建議或意見。
  • 如要回報開發人員工具問題,請在開發人員工具中依序點選「更多選項」更多   >「說明」 >「回報開發人員工具的問題」
  • @ChromeDevTools 張貼推文。
  • 歡迎前往開發人員工具的 YouTube 影片或開發人員工具的 YouTube 影片提供新功能留言。