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 のシリアル化と逆シリアル化にはコストがかかること、「JavaScript 文字列への JS コマンドのシリアル化」と「JS 文字列のシリアル化解除」のステップ全体が冗長であり、スキップできることに気付きました。
技術的な詳細: 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 時間
| メソッド名 | 最適化なし（ミリ秒） | 最適化（ミリ秒） | 差（ミリ秒） | 速度の改善（%） |
| 合計 | 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 使用率で高速に動作します。🎉
プレビュー チャンネルをダウンロードする
デフォルトの開発ブラウザとして 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 動画にコメントを残してください。