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 コマンド全体を、eval()
にできる JavaScript ソースコードの文字列にシリアル化します。ご想像のとおり、これらの文字列は非常に長くなり、費用もかさむ可能性があります。コマンドが V8 によって受信されると、これらの JavaScript コードの文字列は実行前に逆シリアル化されます。各メッセージをシリアル化およびシリアル化解除するこのプロセスでは、大きなオーバーヘッドが発生します。
Benedikt Meurer は、arguments
のシリアル化とシリアル化解除が非常にコストがかかり、「JS コマンドを JS 文字列にシリアル化する」と 「JS 文字列をシリアル化解除する」のステップ全体が冗長であり、スキップできることに気づきました。
技術的な詳細: RenderFrameHostImpl::ExecuteJavaScript
改善内容
JavaScript ソースコードの文字列を作成する代わりに、オブジェクト名、呼び出されるメソッド、引数のリストを直接渡すことができる別の mojo API メソッドを導入しました。これにより、シリアル化とシリアル化解除をスキップし、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 の所要時間
メソッド名 | 最適化なし(ミリ秒) | 最適化済み(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 使用量を抑えながら高速に動作します。🎉
プレビュー チャネルをダウンロードする
デフォルトの開発用ブラウザとして Chrome の Canary、Dev、Beta のいずれかを使用することを検討してください。これらのプレビュー チャンネルでは、最新の DevTools 機能にアクセスしたり、最先端のウェブ プラットフォーム API をテストしたりできます。また、ユーザーよりも先にサイトの問題を見つけることもできます。
Chrome DevTools チームに問い合わせる
次のオプションを使用して、DevTools の新機能、アップデート、その他のトピックについて話し合います。
- フィードバックや機能リクエストは crbug.com から送信してください。
- DevTools で [その他] > [ヘルプ] > [DevTools の問題を報告] を使用して、DevTools の問題を報告します。
- @ChromeDevTools にツイートします。
- DevTools の新機能に関する YouTube 動画または DevTools のヒントに関する YouTube 動画にコメントを残してください。