スタイルの再計算イベント中の CSS セレクターのパフォーマンスを分析する

パフォーマンス ツールでは、実行時間の長いタスクが右上隅に赤い三角形で強調表示され、実行に時間がかかり、パフォーマンスが低下しているメイン スレッドでの作業を示します。

パフォーマンス記録では、これらの実行時間の長いタスクの一部が 、スタイル イベントの再計算 である可能性があります。 [スタイルの再計算] イベントは、ブラウザーが次の操作を行うのにかかる時間を追跡します。

• ページ上の DOM 要素を反復処理して、特定の要素に一致するすべての CSS スタイルルールを見つけます。
• 一致する CSS スタイルルールに基づいて、各要素の実際のスタイルを計算します。

CSS ルールの適用性が次のように変更された場合は、CSS スタイルを再計算する必要があります。

• DOM に要素を追加または DOM から削除する場合。
• または 属性の値など、要素の属性がclassid変更された場合。
• マウスの移動や、Web ページ内のどの要素にフォーカスが設定されているかの変更など、ユーザー入力が発生すると、ルールに影響を与える :hover 可能性があります。

実行時間の長い [スタイルの再計算 ] イベントがある場合は、[ セレクターの統計 ] タブを使用して、最も時間がかかり、パフォーマンスが低下する CSS セレクターを把握できます。

[ セレクター統計 ] タブには、パフォーマンス記録内の 1 つ以上の 再計算スタイル イベントに関連した CSS ルール セレクターに関する統計情報が表示されます。

セレクター統計を有効にしてパフォーマンス トレースを記録する

実行時間の長い スタイルの再計算 イベント中に CSS ルール セレクターの統計情報を表示するには、まず、セレクター統計機能を有効にしてパフォーマンス トレースを記録します。 [セレクター統計] 機能を有効 にするには、[CSS セレクター統計を有効にする ] チェック ボックスをオンにすると、[ セレクターの統計 ] タブが表示されます。

セレクター統計機能は、パフォーマンス記録によりオーバーヘッドが増えるため、常に有効になっているわけではありません。 [ スタイルの再計算 ] イベントとその他のレンダリング情報のパフォーマンスを調査する必要がある場合にのみ、オンのままにしてください。

セレクター統計を使用してパフォーマンス トレースを記録するには:

1. フォト ギャラリーのデモ ページなど、新しいウィンドウまたはタブで Web ページを開きます。

2. DevTools を開くには、Web ページを右クリックし、[ 検査] を選択します。 または、 Ctrl + Shift + I (Windows、Linux) または Command + Option + I (macOS) を押します。 DevTools が開きます。

3. DevTools のアクティビティ バーで、[パフォーマンス ()] タブを選択します。そのタブが表示されない場合は、[その他のツール] () > [パフォーマンス] を選択します。

4. パフォーマンス ツールで、[キャプチャ設定] ([キャプチャ設定) ボタンをクリックします。

5. [ CSS セレクターの統計を有効にする] チェック ボックスをオンにします。

   

6. [ レコード ] () ボタンをクリックし、Web サイトまたはアプリに対して改善するシナリオを実行します。

7. [ 停止 ] ボタンをクリックします。

次に、以下のセクションで説明されているように、CSS セレクターの統計情報を表示します。

1 つのイベントの CSS ルール セレクターの統計情報を表示する

1 つの [スタイルの再計算 ] イベントに関連する CSS ルール セレクターの統計情報を表示するには:

1. 上記の「 セレクター統計を有効にしてパフォーマンス トレースを記録する」の手順を実行します。

2. パフォーマンス記録で [スタイルの再計算 ] イベントを見つけてクリックします。

3. パフォーマンス ツールの下部セクションで、[セレクターの統計] タブをクリックします。

   

[セレクター統計] タブの CSS セレクターの表

パフォーマンス ツールの [セレクター統計] タブには、CSS セレクターのテーブルが含まれています。 表には、CSS セレクターごとに次の情報が表示されます。

完了したら、パフォーマンス ツールで [キャプチャ設定] ([キャプチャ設定) ボタンをクリックし、[CSS セレクターの統計を有効にする] チェック ボックスをオフにします。

複数のイベントの CSS ルール セレクター統計を表示する

複数の スタイルの再計算 イベントに関連する CSS ルール セレクターの集計統計を表示するには、次のように複数の セレクター統計 テーブルをスプレッドシートにコピーします。

1. 上記の「 セレクター統計を有効にしてパフォーマンス トレースを記録する」の手順を実行します。

2. 関心のある最初の [スタイルの再計算 ] イベントを見つけて、それをクリックします。

3. パフォーマンス ツールの下部セクションで、[セレクターの統計] タブをクリックします。

4. セレクター統計テーブルを右クリックし、[ テーブルのコピー] を選択します。

   

5. 表をスプレッドシート (Microsoft Excel など) に貼り付けます。

6. 前の手順を、関心のある他の [スタイルの再計算] イベントと共に繰り返します。

完了したら、パフォーマンス ツールで [キャプチャ設定] ([キャプチャ設定) ボタンをクリックし、[CSS セレクターの統計を有効にする] チェック ボックスをオフにします。

完全な記録の集約 CSS ルール セレクター統計を表示する

パフォーマンス記録全体に関係する CSS ルール セレクターの集計統計を表示するには:

1. 上記の「 セレクター統計を有効にしてパフォーマンス トレースを記録する」の手順を実行します。

2. 炎のグラフの空の領域をクリックして、パフォーマンス記録で選択されているイベントの選択を解除します。

3. 録音範囲全体を選択します。 これを行うには、パフォーマンス ツールの上部にある CPU グラフをダブルクリックするか、マウスを使用して炎グラフの上にマウス ポインターを合わせ、グラフ全体が表示されるまで上にスクロールします。

4. パフォーマンス ツールの下部セクションで、[セレクターの統計] タブをクリックします。

   

完了したら、パフォーマンス ツールで [キャプチャ設定] ([キャプチャ設定) ボタンをクリックし、[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 ブログ投稿。