DevTools のタイムライン - 詳細を説明します

Heather Mahan

DevTools の [Timeline] パネルは、パフォーマンス最適化への道のりにおける最初の段階で常に最適な場所です。アプリのアクティビティに関する一元的な概要により、読み込み、スクリプト作成、レンダリング、描画にどの時間がかかっているのかを分析できます。最近、タイムラインがアップグレードされ、計測手法が増え、アプリのパフォーマンスをより詳細に確認できるようになりました。

以下の機能が追加されました。

• JavaScript プロファイラが統合されています。（フレームチャートも含まれます）
• フレーム ビューアを使用すると、合成レイヤを可視化できます。
• Paint Profiler: ブラウザのペイント アクティビティを詳細にドリルダウンする

この記事で説明する [Paint] キャプチャ オプションを使用すると、パフォーマンスのオーバーヘッドが生じるため、必要な場合にのみ有効にしてください。

統合された JavaScript プロファイラ

[Profiles] パネルを見たことがある方は、JavaScript CPU Profiler をご存じかもしれません。このツールは、JavaScript 関数の実行に時間がかかっている場所を測定します。フレームチャートで JavaScript プロファイルを表示すると、JavaScript の処理を経時的に可視化できます。

JavaScript 実行の詳細な内訳を [タイムライン] パネルで確認できるようになりました。[JS Profiler] キャプチャ オプションを選択すると、JavaScript コールスタックが他のブラウザ イベントとともにタイムラインに表示されます。この機能をタイムラインに追加すると、デバッグのワークフローを効率化できます。さらに、JavaScript を状況に応じて表示し、ページの読み込み時間やレンダリングに影響するコード部分を特定することもできます。

JavaScript プロファイラに加えて、フレームグラフ ビューも [Timeline] パネルに統合されました。アプリのアクティビティを、従来のウォーターフォール チャートまたはフレームチャートとして表示できるようになりました。フレームグラフ アイコンを使用すると、この 2 つのビューを切り替えることができます。

JS Profiler キャプチャ オプションとフレームグラフビューを使用して、[Timeline] でコールスタックを調査します。

注: フレームチャートでのズームとパンには WASD を使用します。Shift キーを押しながらドラッグして、選択ボックスを描画します。

フレーム ビューア

レイヤ合成という技術も、デベロッパーにはあまり知られていませんでした。レイヤを慎重に使用することで、コストのかかる再描画を回避し、パフォーマンスを大幅に向上させることができます。しかし、ブラウザがどのようにコンテンツを合成するかについては、必ずしも明確ではありません。タイムラインの新しい [Paint] キャプチャ オプションを使用すると、録画の各フレームで合成レイヤを可視化できます。

[Main Thread] の上にあるグレーのフレームバーを選択すると、[Layers] パネルに、アプリを構成するレイヤのビジュアル モデルが表示されます。

注: タイムライン記録でフレームバーをクリックして、アニメーションを再生します。

レイヤモデルをズーム、回転、ドラッグして、コンテンツを探索できます。レイヤにカーソルを合わせると、ページ上の現在の位置が表示されます。レイヤを右クリックすると、[要素] パネル内の対応するノードに移動できます。レイヤにプロモートされた内容が表示されます。レイヤを選択すると、[合成の理由] という行でプロモートされた理由も確認できます。

Codrops の Scattered Polaroids Gallery のレイヤを調べて、ブラウザで合成が行われた理由を確認します。

ペイント プロファイラ

最後に、高価な塗料に起因するジャンクを特定できるように、ペイント プロファイラを追加しました。この機能により、ペイント イベント中に Chrome が行う処理の詳細がタイムラインに示されるようになります。

まず、各ペイント イベントに対応するビジュアル コンテンツを簡単に識別できるようになりました。タイムラインで緑色のペイント イベントを選択すると、[Details] ペインに、実際にペイントされたピクセルのプレビューが表示されます。

ブラウザが [Paint] キャプチャ オプションを使用して描画したピクセルのプレビュー。

さらに詳しく学習したい場合は、[Paint Profiler] ペインに切り替えます。このプロファイラには、選択したペイントに対してブラウザが実行した描画コマンドが正確に表示されます。これらのネイティブ コマンドをアプリの実際のコンテンツと関連付けるには、draw* 呼び出しを右クリックして、[Elements] パネルで対応するノードに直接移動します。

Paint Profiler を使用して、ネイティブ ブラウザの DOM 要素への描画呼び出しを関連付けます。

ペインの上部にあるミニ タイムラインでは、描画処理を再現し、ブラウザの実行にコストがかかる操作を把握できます。描画オペレーションは、ピンク（シェイプ）、青（ビットマップ）、緑（テキスト）、紫（その他）のように色分けされます。バーの高さは通話時間を示します。そのため、高いバーを調べると、特定のペイントでどのようなコストがかかっていたかがわかります。

プロフィールと利益！

パフォーマンスの最適化においては、ブラウザの知識は非常に役立ちます。タイムラインの更新により、コードと Chrome のレンダリング プロセスの関係が明確になります。タイムラインのこれらの新しいオプションを試して、Chrome DevTools でジャンク ハンティング ワークフローを強化できる方法をご確認ください。