DevTools の起動時間の短縮

Maksim Sadym 氏
Maksim Sadym
Twitter GitHub

DevTools の起動が約 13% 高速化 🎉?（11.2 秒から 10 秒に）

要約: この結果は、冗長なシリアル化を削除することで実現します。

概要

DevTools の起動時に V8 JavaScript エンジンを呼び出す必要があります。

DevTools の起動プロセス

Chromium で DevTools コマンドを V8（および IPC 全般）に送信するために使用するメカニズムを、mojo と呼びます。同僚の Benedikt Meurer と Sigurd Schneider は別のタスクに取り組んでいるときに非効率なことを発見し、メッセージの送受信における 2 つの冗長なステップを取り除くことでプロセスを改善するためのアイデアを思いつきました。

mojo メカニズムの仕組みを詳しく見てみましょう。

mojo メカニズム

Mojo のメカニズム

JS コマンドを実行する mojo コマンド EvaluateScript があります。arguments を含む JS コマンド全体を、JavaScript ソースコードの文字列（eval() に指定可能）にシリアル化します。ご想像のとおり、こうした文字列は非常に長く、費用も高くなります。コマンドが V8 で受信されると、JavaScript コードのこれらの文字列は、実行前にシリアル化解除されます。メッセージごとにシリアル化およびシリアル化解除するこのプロセスは、かなりのオーバーヘッドを発生させます。

Benedikt Meurer は、arguments のシリアル化とシリアル化解除には費用がかかり、「Serialize JS command to JS string」と「Deserialize JS string」というステップ全体が冗長であり、スキップできることに気づきました。

詳細な技術情報: RenderFrameHostImpl::ExecuteJavaScript

改善された方法

メカニズムの改善

もう一つの mojo API メソッドを導入して、JavaScript ソースコードの文字列を作成する代わりに、オブジェクト名、呼び出すメソッド、引数のリストを直接渡すことができるようになりました。これにより、シリアル化とシリアル化解除をスキップし、JavaScript コードを解析する必要がなくなります。

この最適化の実装方法に関する技術的な詳細については、次の 2 つのパッチを参照してください。

  1. CL 2431864: [devtools] フロントエンドでのメッセージ ディスパッチのパフォーマンス オーバーヘッドを削減
  2. CL 2442012: [devtools] DevTools で ExecuteJavaScriptMethod を使用する

効果

この変更の効果を測定するため、Chromium リビジョン cb971089a058 と 4f213b39d581（変更前と変更後）を比較して測定を実施しました。

どちらのリビジョンでも、次のシナリオを 5 回実行しました。

  1. chrome://tracing を使用してトレースを記録する
  2. DevTools-on-DevTools を開く
  3. 記録された CrRendererMain トレースを取得し、V8 固有の指標を比較します。

これらのテストによると、DevTools の最適化により、起動が約 13% 高速化（11.2 秒から 10 秒に）。

ハイライト、CPU 時間

メソッド名 最適化なし（ミリ秒） 最適化（ミリ秒） 差異（ミリ秒） 速度の向上（%）
合計 11,213.19 9,953.99 -1,259.20 12.65%
v8.run 49,967 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%

DevTools の読み込み CPU 時間（ミリ秒）

完全なトレース指標の比較表

その結果、DevTools が起動し、より少ない CPU 使用率でより高速に動作します。🎉

プレビュー チャネルをダウンロードする

デフォルトの開発ブラウザとして、Chrome Canary、Dev、Beta の使用を検討してください。これらのプレビュー チャネルでは、最新の DevTools 機能にアクセスしたり、最先端のウェブ プラットフォーム API をテストしたり、ユーザーが事前にサイトに関する問題を発見したりすることができます。

Chrome DevTools チームへのお問い合わせ

投稿内の新機能や変更点、または DevTools に関するその他の事項について議論するには、以下のオプションを使用します。

  • crbug.com からご提案やフィードバックをお寄せください。
  • DevTools の [その他のオプション] その他   > [ヘルプ] > [DevTools の問題を報告する] を使用して、DevTools の問題を報告する。
  • @ChromeDevTools でツイートします。
  • DevTools の新機能の YouTube 動画または DevTools のヒントの YouTube 動画で、コメントを記入してください。