このページは Cloud Translation API によって翻訳されました。

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

フレームビューア

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

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

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

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

ペイントプロファイラ

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

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

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

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

ペイントプロファイラを使用して、ネイティブブラウザの描画呼び出しと DOM 要素の関連付けを行います。 — **Paint Profiler** を使用して、ネイティブブラウザの DOM 要素への描画呼び出しを関連付けます。

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

プロフィールと利益！

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