DevTools の起動が約 13% 高速化 🎉?(11.2 秒から 10 秒に)
要約: この結果は、冗長なシリアル化を削除することで実現します。
概要
DevTools の起動時に V8 JavaScript エンジンを呼び出す必要があります。
Chromium で DevTools コマンドを V8(および IPC 全般)に送信するために使用するメカニズムを、mojo
と呼びます。同僚の Benedikt Meurer と Sigurd Schneider は別のタスクに取り組んでいるときに非効率なことを発見し、メッセージの送受信における 2 つの冗長なステップを取り除くことでプロセスを改善するためのアイデアを思いつきました。
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 つのパッチを参照してください。
- CL 2431864: [devtools] フロントエンドでのメッセージ ディスパッチのパフォーマンス オーバーヘッドを削減
- CL 2442012: [devtools] DevTools で
ExecuteJavaScriptMethod
を使用する
効果
この変更の効果を測定するため、Chromium リビジョン cb971089a058 と 4f213b39d581(変更前と変更後)を比較して測定を実施しました。
どちらのリビジョンでも、次のシナリオを 5 回実行しました。
chrome://tracing
を使用してトレースを記録する- DevTools-on-DevTools を開く
- 記録された
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 使用率でより高速に動作します。🎉
プレビュー チャネルをダウンロードする
デフォルトの開発ブラウザとして、Chrome Canary、Dev、Beta の使用を検討してください。これらのプレビュー チャネルでは、最新の DevTools 機能にアクセスしたり、最先端のウェブ プラットフォーム API をテストしたり、ユーザーが事前にサイトに関する問題を発見したりすることができます。
Chrome DevTools チームへのお問い合わせ
投稿内の新機能や変更点、または DevTools に関するその他の事項について議論するには、以下のオプションを使用します。
- crbug.com からご提案やフィードバックをお寄せください。
- DevTools の [その他のオプション] > [ヘルプ] > [DevTools の問題を報告する] を使用して、DevTools の問題を報告する。
- @ChromeDevTools でツイートします。
- DevTools の新機能の YouTube 動画または DevTools のヒントの YouTube 動画で、コメントを記入してください。