パフォーマンス

パフォーマンスツールは、サイトの一般的な応答性、JavaScript やレイアウトのパフォーマンスを知ることができるツールです。パフォーマンスツールを使用してあなたのサイトで、ある期間の記録やプロファイルを作成できます。記録後は、プロファイル内でサイトをレンダリングするためにブラウザが行ったことの概要や、プロファイル内のフレームレートを表示します。

プロファイルのさまざまな側面を詳しく調査するために、4 つのサブツールを使用できます:

  • タイムラインはレイアウトの実行、JavaScript の実行、再描画、ガベージコレクションといった、ブラウザが実行したさまざまな操作を明らかにします。
  • 呼び出しツリーは、ブラウザがもっとも多くの時間を費やした JavaScript 関数を明らかにします。
  • フレームチャートは、記録全体の JavaScript コールスタックを明らかにします。
  • メモリ割り当てビューは、記録の中でコードが実行したヒープ割り当てを表示します。


はじめに

UI ツアー
パフォーマンスツールについてひととおり理解するために、UI のクイックツアーを用意しました。
操作手順
基本操作: ツールを開く、記録を作成・保存・読み込み・設定する

パフォーマンスツールのコンポーネント

フレームレート
サイトの全体的な応答性を理解します。
呼び出しツリー
サイトの JavaScript のボトルネックを発見します。
メモリ割り当て
記録の中でコードが実施したメモリ割り当てを表示します。
タイムライン
サイトとの対話として、ブラウザが実行した作業を理解します。
フレームチャート
記録全体で、どの JavaScript 関数をいつ実行したかを明らかにします。

シナリオ

CSS プロパティのアニメーション
ブラウザがどのようにページを更新するか、およびさまざまな CSS プロパティのアニメーションがパフォーマンスにどのような影響を与えるかを、タイムラインを使用して理解します。
集約的な JavaScript
長時間実行される JavaScript によって引き起こされるパフォーマンスの問題、およびこのような状況で Worker がどのように役立つかを明らかにするために、フレームチャートとタイムラインを使用します。

ドキュメントのタグと貢献者

 このページの貢献者: yyss
 最終更新者: yyss,