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

Heather Mahan

DevTools の [タイムライン] パネルは、これまでもパフォーマンスを最適化するための最良の起点となってきました。アプリのアクティビティを一元的に把握できるこの概要により、読み込み、スクリプトの作成、レンダリング、ペイントに時間がかかっている場所を分析できます。最近、タイムラインがアップグレードしてインストルメンテーションが追加され、アプリのパフォーマンスをより詳細に確認できるようになりました。

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

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

統合された JavaScript Profiler

[Profiles] パネルをご覧になったことがある方は、JavaScript CPU Profiler についてはご存じかと思います。このツールは、JavaScript 関数の実行時間が費やされる場所を測定します。Flame Chart で JavaScript プロファイルを表示すると、JavaScript の処理の推移を可視化できます。

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

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

炎のアイコン。
JS Profiler のキャプチャ オプションと Flame Chart ビューを使用して、タイムラインでコールスタックを調査する。
JS Profiler キャプチャ オプションとフレーム チャート ビューを使用して、タイムラインのコールスタックを調査します。

フレーム ビューア

レイヤ合成という技術は、これまでデベロッパーがほとんど隠されてきたブラウザのもう一つの側面です。レイヤは、慎重に、慎重に使用すれば、コストのかかる再ペイントを回避し、パフォーマンスを大幅に向上させることができます。しかし多くの場合、ブラウザがコンテンツをどのように合成するかを予測できません。タイムラインの新しい Paint キャプチャ オプションを使用すると、合成レイヤを録画の各フレームで可視化できます。

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

レイヤモデルをズーム、回転、ドラッグして、そのモデルの内容を探索できます。レイヤにカーソルを合わせると、ページ上の現在の位置が表示されます。レイヤを右クリックすると、[要素] パネルで対応するノードにジャンプできます。これらの機能を使用すると、レイヤに昇格した項目を確認できます。レイヤを選択すると、[合成理由] 行で昇格した理由を確認できます。

Codrops の Scattered Polaroids Gallery のレイヤを調べ、ブラウザの合成理由を明らかにします。
Codrops の Scattered Polaroids Gallery のレイヤを調べ、ブラウザの合成理由を明らかにします。

ペイント プロファイラ

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

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

ペイント キャプチャ オプションを使用して、ブラウザが描画したピクセルをプレビューします。
Paint キャプチャ オプションを使用して、ブラウザがペイントしたピクセルをプレビューします。

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

Paint Profiler を使用して、ネイティブ ブラウザの Draw 呼び出しと DOM 要素の関連付けを関連付ける
Paint Profiler を使用した、ネイティブ ブラウザの draw 呼び出しと DOM 要素の関連付け。

ペインの上部に表示されるミニ タイムラインを見ると、ペイント処理を再生し、ブラウザによる実行にコストがかかる処理を把握できます。描画オペレーションは、ピンク(図形)、(ビットマップ)、(テキスト)、(その他)のように色分けされます。バーの高さは通話時間を示しているため、高いバーを調べると、特定の塗料にかかっていた費用を把握できます。

プロフィールと利益

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