パフォーマンスツールは、サイトの一般的な応答性、JavaScript やレイアウトのパフォーマンスを知ることができるツールです。パフォーマンスツールを使用してあなたのサイトで、ある期間の記録やプロファイルを作成できます。記録後は、プロファイル内でサイトをレンダリングするためにブラウザが行ったことの概要や、プロファイル内のフレームレートを表示します。
プロファイルのさまざまな側面を詳しく調査するために、3 つのサブツールを使用できます:
- ウォーターフォールはレイアウトの実行、JavaScript の実行、再描画、ガベージコレクションといった、ブラウザが実行したさまざまな操作を明らかにします。
- 呼び出しツリーは、ブラウザがもっとも多くの時間を費やした JavaScript 関数を明らかにします。
- フレームチャートは、記録全体の JavaScript コールスタックを明らかにします。
はじめに
パフォーマンスツールのコンポーネント
シナリオ
- CSS プロパティのアニメーション
- ブラウザがどのようにページを更新するか、およびさまざまな CSS プロパティのアニメーションがパフォーマンスにどのような影響を与えるかを、ウォーターフォールを使用して理解します。
- 集約的な JavaScript
- 長時間実行される JavaScript によって引き起こされるパフォーマンスの問題、およびこのような状況で Worker がどのように役立つかを明らかにするために、フレームチャートとウォーターフォールを使用します。