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 のシリアル化とシリアル化解除が非常にコストがかかり、「JS コマンドを JS 文字列にシリアル化する」と 「JS 文字列をシリアル化解除する」のステップ全体が冗長であり、スキップできることに気づきました。

技術的な詳細: RenderFrameHostImpl::ExecuteJavaScript

改善内容

メカニズムの改善

JavaScript ソースコードの文字列を作成する代わりに、オブジェクト名、呼び出されるメソッド、引数のリストを直接渡すことができる別の mojo API メソッドを導入しました。これにより、シリアル化とシリアル化解除をスキップし、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 の所要時間

メソッド名 最適化なし（ミリ秒） 最適化済み（ms） 差異（ミリ秒） 速度の向上（%）
合計 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%

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

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

その結果、DevTools が開き、CPU 使用量を抑えながら高速に動作します。🎉

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

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

Chrome DevTools チームに問い合わせる

次のオプションを使用して、DevTools の新機能、アップデート、その他のトピックについて話し合います。