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

Maksim Sadym
Maksim Sadym

開發人員工具啟動速度現在快了約 13% 🎉 (從 11.2 秒降至 10 秒)

重點摘要:這項結果是透過移除多餘的序列化而達成。

總覽

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

開發人員工具啟動程序

Chromium 用來將開發人員工具指令傳送至 V8 (以及一般用於 IPC) 的機制稱為 mojo。我的同事 Benedikt MeurerSigurd Schneider 在處理其他工作時發現效率不彰,因此提出了一個想法,也就是在傳送和接收這些訊息時,移除兩個多餘的步驟,以改善這個程序。

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

mojo 機制

Mojo 機制

有一個 mojo 指令 EvaluateScript 會執行 JS 指令。它會將整個 JS 指令 (包括 arguments) 序列化為可 eval() 的 JavaScript 原始碼字串。如您所想,這些字串可能會變得相當長,而且成本高昂。接收指令後,這些 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 499.67 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 版設為預設開發人員版瀏覽器。這些預覽管道可讓您存取最新的 DevTools 功能,測試最新的網路平台 API,並在使用者發現問題前,協助您找出網站的問題!

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

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