DevTools の起動時間の短縮

Maksim Sadym
Maksim Sadym
X 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 コマンド全体を、eval() となる JavaScript ソースコードの文字列にシリアル化します。ご想像のとおり、これらの文字列は非常に長く、費用がかかる可能性があります。コマンドが V8 で受信されると、JavaScript コードのこれらの文字列はシリアル化解除されてから実行されます。メッセージごとにシリアル化またはシリアル化解除するこのプロセスでは、かなりのオーバーヘッドが発生します。

Benedikt Meurer は、arguments のシリアル化と逆シリアル化にはコストがかかること、「JavaScript 文字列への JS コマンドのシリアル化」と「JS 文字列のシリアル化解除」のステップ全体が冗長であり、スキップできることに気付きました。

技術的な詳細: 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 時間

メソッド名 最適化なし（ミリ秒） 最適化（ミリ秒） 差（ミリ秒） 速度の改善（%）
合計 1,121,319 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％

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

フル トレース指標の比較表

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

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

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

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

以下のオプションを使用して、投稿の新機能や変更点、または DevTools に関連するその他のことについて話し合います。

  • ご提案やフィードバックは、crbug.com からお送りください。
  • DevTools の [More options] その他   > [Help] > [Report a DevTools issues] を使用して、DevTools の問題を報告します。
  • @ChromeDevTools でツイートしてください。
  • DevTools の新機能に関する YouTube 動画または DevTools のヒントの YouTube 動画にコメントを残してください。