パフォーマンスの最適化を始める際、DevTools のタイムライン パネルは常に最適な最初のステップでした。アプリのアクティビティの概要を一元的に確認できるため、読み込み、スクリプト、レンダリング、ペイントにどのくらいの時間が費やされているかを分析できます。先日、タイムラインがアップグレードされ、より多くの計測機能が追加されました。これにより、アプリのパフォーマンスをより詳細に把握できるようになりました。
以下の機能が追加されました。
- 統合された JavaScript プロファイラ。（フレーム チャートを含む）
- 合成レイヤを可視化できるフレーム ビューア。
- ペイント プロファイラ: ブラウザのペイント アクティビティを詳細にドリルダウンできます。
この記事で説明するペイント キャプチャ オプションを使用すると、パフォーマンス オーバーヘッドが発生するため、必要な場合にのみオンにしてください。
統合された JavaScript プロファイラ
[プロファイル] パネルを操作したことがあれば、JavaScript CPU プロファイラに精通しているはずです。このツールは、JavaScript 関数で実行時間のかかる場所を測定します。Flame Chart で JavaScript プロファイルを表示すると、JavaScript 処理の経時的な変化を可視化できます。
これで、[タイムライン] パネルで JavaScript の実行の詳細を確認できるようになりました。[JS Profiler] キャプチャ オプションを選択すると、JavaScript コールスタックが他のブラウザ イベントとともにタイムラインに表示されます。この機能をタイムラインに追加すると、デバッグ ワークフローを効率化できます。さらに、JavaScript をコンテキスト内で確認し、ページの読み込み時間とレンダリングに影響するコード部分を特定することもできます。
JavaScript プロファイラに加えて、[タイムライン] パネルに炎グラフビューも統合されました。アプリのアクティビティを、従来のイベント ウォーターフォールまたは炎グラフとして表示できるようになりました。フレームグラフ アイコンを使用すると、これらの 2 つのビューを切り替えることができます。
フレーム ビューア
レイヤ コンポジットは、これまでは開発者からほとんど隠されていたブラウザのもう一つの側面です。レイヤを慎重に使用することで、コストのかかる再描画を回避し、パフォーマンスを大幅に向上させることができます。ただし、ブラウザがコンテンツをどのように合成するか予測するのは簡単ではありません。タイムラインの新しい [ペイント] キャプチャ オプションを使用すると、録画の各フレームで合成レイヤを可視化できます。
[Main Thread] の上のグレーのフレームバーを選択すると、[Layers] パネルに、アプリを構成するレイヤのビジュアル モデルが表示されます。
レイヤモデルをズーム、回転、ドラッグして、その内容を調べることができます。レイヤにカーソルを合わせると、ページ上の現在の位置が表示されます。レイヤを右クリックすると、[要素] パネルで対応するノードに移動できます。これらの機能は、レイヤに昇格された内容を示します。レイヤを選択すると、[Compositing Reasons] というラベルの行に、そのレイヤが昇格した理由も表示されます。
ペイント プロファイラ
最後に、高負荷なペイントによって発生するジャンクを特定できるように、ペイント プロファイラを追加しました。この機能により、ペイント イベント中に Chrome が行う処理の詳細がタイムラインに追加されます。
まず、各ペイント イベントに対応するビジュアル コンテンツを簡単に特定できるようになりました。タイムラインで緑色のペイント イベントを選択すると、[詳細] ペインに、ペイントされた実際のピクセルのプレビューが表示されます。
詳しく確認するには、[ペイント プロファイラ] ペインに切り替えます。このプロファイラには、選択したペイントに対してブラウザが実行した正確な描画コマンドが表示されます。これらのネイティブ コマンドをアプリ内の実際のコンテンツに関連付けるには、draw* 呼び出しを右クリックして、[要素] パネルで対応するノードに直接移動します。
ペインティング プロセスを再生して、ブラウザで実行に時間のかかるオペレーションを確認できます。描画オペレーションは、ピンク（シェイプ）、青（ビットマップ）、緑（テキスト）、紫（その他）の色分けで表示されます。バーの高さは呼び出し時間を示しますので、長いバーを調べると、特定のペイントでコストがかかった原因を把握できます。
プロフィールと収益
パフォーマンスの最適化では、ブラウザに関する知識が非常に役立ちます。これらのタイムラインの更新により、コードと Chrome のレンダリング プロセスの関係を明確に把握できます。タイムラインでこれらの新しいオプションを試し、Chrome DevTools でジャンク ハンティング ワークフローを強化する方法をご確認ください。