スタイルの再計算イベント中の CSS セレクターのパフォーマンスを分析する
Web ページに実行時間の長い [スタイルの再計算] イベントがある場合は、パフォーマンス ツールの [セレクター統計] タブを使用して、最も時間がかかり、パフォーマンスが低下する CSS セレクターを特定します。 [ セレクター統計 ] タブには、パフォーマンス記録内の 1 つ以上の 再計算スタイル イベントに関連した CSS ルール セレクターに関する統計情報が表示されます。
パフォーマンス ツールでは、実行時間の長いタスクが右上隅に赤い三角形で強調表示され、実行に時間がかかり、パフォーマンスが低下しているメイン スレッドでの作業を示します。
パフォーマンス記録では、これらの実行時間の長いタスクの一部が 、スタイル イベントの再計算 である可能性があります。 [スタイルの再計算] イベントは、ブラウザーが次の操作を行うのにかかる時間を追跡します。
- ページ上の DOM 要素を反復処理して、特定の要素に一致するすべての CSS スタイルルールを見つけます。
- 一致する CSS スタイルルールに基づいて、各要素の実際のスタイルを計算します。
CSS ルールの適用性が次のように変更された場合は、CSS スタイルを再計算する必要があります。
- DOM に要素を追加または DOM から削除する場合。
-
class属性やid属性の値など、要素の属性が変更された場合。 - マウスの移動や Web ページ内のどの要素にフォーカスが設定されているかの変更など、ユーザー入力が発生すると、
:hoverルールに影響を与える可能性があります。
セレクター統計を有効にしてパフォーマンス トレースを記録する
実行時間の長い スタイルの再計算 イベント中に CSS ルール セレクターの統計情報を表示するには、まず、セレクター統計機能を有効にしてパフォーマンス トレースを記録します。 [セレクター統計] 機能を有効 にするには、[CSS セレクター統計を有効にする ] チェック ボックスをオンにすると、[ セレクターの統計 ] タブが表示されます。
セレクター統計機能は、パフォーマンス記録によりオーバーヘッドが増えるため、常に有効になっているわけではありません。 [ スタイルの再計算 ] イベントとその他のレンダリング情報のパフォーマンスを調査する必要がある場合にのみ、オンのままにしてください。
セレクター統計を使用してパフォーマンス トレースを記録するには:
フォト ギャラリーのデモ ページなど、新しいウィンドウまたはタブで Web ページを開きます。
DevTools を開くには、Web ページを右クリックし、[ 検査] を選択します。 または、 Ctrl + Shift + I (Windows、Linux) または Command + Option + I (macOS) を押します。 DevTools が開きます。
DevTools の アクティビティ バーで、[ パフォーマンス (
)] タブを選択します。そのタブが表示されない場合は、 その他のツール (
) >Performance を選択します。パフォーマンス ツールで、[キャプチャ設定] ([キャプチャ設定
![] アイコン](selector-stats-images/capture-settings-icon.png)
) ボタンをクリックします。[ CSS セレクターの統計を有効にする] チェック ボックスをオンにします。
![パフォーマンス ツールの [CSS セレクター統計を有効にする] チェック ボックス](selector-stats-images/enable-feature.png)
[ レコード ] (
![[レコード] アイコン](selector-stats-images/record-icon.png)
) ボタンをクリックし、Web サイトまたはアプリに対して改善するシナリオを実行します。[ 停止 ] ボタンをクリックします。
次に、以下のセクションで説明されているように、CSS セレクターの統計情報を表示します。
1 つのイベントの CSS ルール セレクターの統計情報を表示する
1 つの [スタイルの再計算 ] イベントに関連する CSS ルール セレクターの統計情報を表示するには:
上記の「 セレクター統計を有効にしてパフォーマンス トレースを記録する」の手順を実行します。
パフォーマンス記録で [スタイルの再計算 ] イベントを見つけてクリックします。
パフォーマンス ツールの下部セクションで、[セレクターの統計] タブをクリックします。
![パフォーマンス ツールの [セレクター統計] タブ](selector-stats-images/single-event.png)
[セレクター統計] タブの CSS セレクターの表
パフォーマンス ツールの [セレクター統計] タブには、CSS セレクターのテーブルが含まれています。 表には、CSS セレクターごとに次の情報が表示されます。
| 列 | 説明 |
|---|---|
| 経過時間 (ms) | ブラウザーがこの CSS セレクターの照合に費やした時間。 この時間はミリ秒単位で指定されます。ここで、1 ミリ秒は 1 秒の 1/1000 です。 |
| 一致試行 | ブラウザー エンジンがこの CSS セレクターと一致しようとした要素の数。 |
| 一致数 | ブラウザー エンジンがこの CSS セレクターと一致した要素の数。 |
| 低速パスの一致しないパスの割合 | この CSS セレクターと一致しなかった要素と、ブラウザー エンジンが一致しようとした要素との比率。ブラウザー エンジンでは、一致するように最適化されていないコードを使用する必要があります。 |
| セレクタ | 一致した CSS セレクター。 |
| スタイル シート | CSS セレクターを含む CSS スタイル シート。 |
完了したら、パフォーマンス ツールで [キャプチャ設定] ([キャプチャ設定) ボタンをクリックし、[CSS セレクターの統計を有効にする] チェック ボックスをオフにします。
複数のイベントの CSS ルール セレクター統計を表示する
複数の スタイルの再計算 イベントに関連する CSS ルール セレクターの集計統計を表示するには、次のように複数の セレクター統計 テーブルをスプレッドシートにコピーします。
上記の「 セレクター統計を有効にしてパフォーマンス トレースを記録する」の手順を実行します。
関心のある最初の [スタイルの再計算 ] イベントを見つけて、それをクリックします。
パフォーマンス ツールの下部セクションで、[セレクターの統計] タブをクリックします。
セレクター統計テーブルを右クリックし、[ テーブルのコピー] を選択します。
![セレクター統計テーブルの [テーブルのコピー] メニュー項目](selector-stats-images/copy-table.png)
表をスプレッドシート (Microsoft Excel など) に貼り付けます。
前の手順を、関心のある他の [スタイルの再計算] イベントと共に繰り返します。
完了したら、パフォーマンス ツールで [キャプチャ設定] ([キャプチャ設定) ボタンをクリックし、[CSS セレクターの統計を有効にする] チェック ボックスをオフにします。
完全な記録の集約 CSS ルール セレクター統計を表示する
パフォーマンス記録全体に関係する CSS ルール セレクターの集計統計を表示するには:
上記の「 セレクター統計を有効にしてパフォーマンス トレースを記録する」の手順を実行します。
炎のグラフの空の領域をクリックして、パフォーマンス記録で選択されているイベントの選択を解除します。
録音範囲全体を選択します。 これを行うには、パフォーマンス ツールの上部にある CPU グラフをダブルクリックするか、マウスを使用して炎グラフの上にマウス ポインターを合わせ、グラフ全体が表示されるまで上にスクロールします。
パフォーマンス ツールの下部セクションで、[セレクターの統計] タブをクリックします。
完了したら、パフォーマンス ツールで [キャプチャ設定] ([キャプチャ設定) ボタンをクリックし、[CSS セレクターの統計を有効にする] チェック ボックスをオフにします。
CSS セレクターの統計を分析する
セレクター統計テーブルに表示されるデータを昇順または降順で並べ替えるには、列ヘッダーをクリックします。 たとえば、最も時間がかかる CSS セレクターを確認するには、 Elapsed (ms) 列ヘッダーをクリックします。
Web ページのパフォーマンスを向上させるには、次の CSS セレクターに注目してください。
- 計算に長い時間がかかりました (高い経過時間 (ms) 値)
- ブラウザーが何度も一致しようとした (高い 一致試行値 )
- と、ブラウザーが実際に多くの要素と一致しなかった (Match Attempts 値と比較してマッチ カウントの値が低い)
- の割合が高く、一致しない低速パスの割合が高くなります。
たとえば、上のスクリーンショットでは次のようになります。
- 最初の CSS セレクター (
.gallery .photo .meta ::selection) には、最も多くの時間が必要でした。 - ブラウザー エンジンは、この CSS セレクターを 6017 回照合しようとしましたが、3234 個の要素にのみ一致しました。
- 一致しなかった 2783 個の要素のうち、78% が一致するように最適化されていないコードを必要とします。
したがって、この CSS セレクターは改善を試みるのに適した候補です。
CSS セレクターを変更して、計算に必要な時間を減らし、ページ上の要素の数を減らしてください。 CSS セレクターを改善する方法は、特定のユース ケースによって異なります。 上記の "レコード" セクションと "表示" セクションの手順を繰り返して、変更が [経過時間 (ms)] 列の [スタイルの再計算] イベント期間を短縮するのに役立ったかどうかを確認します。
関連項目
- パフォーマンス ツールの概要 - DevTools でのランタイム パフォーマンスの分析の概要。
- パフォーマンス機能リファレンス - パフォーマンス ツールの機能の多くについて説明します。
- CSS セレクターのパフォーマンスに関する真実 - Windows ブログ投稿。