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

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

パフォーマンス記録では、これらの実行時間の長いタスクの一部が 、スタイル イベントの再計算 である可能性があります。 これらのイベントは、ブラウザーがページ上の DOM 要素を反復処理し、特定の要素に一致するすべての CSS スタイルルールを見つけて、これらのルールに基づいて要素の実際のスタイルを計算するのにかかる時間を追跡します。 これらのスタイルは、次のような CSS ルールの適用性が変更された場合は常に再計算する必要があります。

• 要素は DOM に追加されるか、DOM から削除されます。
• または idなどのclass要素の属性が変更されます。
• マウスの移動やフォーカスの変更など、ルールに影響を与 :hover える可能性があるユーザー入力が発生します。

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

セレクター統計機能は、パフォーマンス記録内の 1 つ以上の再計算スタイル イベントに関連した CSS ルール セレクターに関する統計情報を提供します。

CSS ルール セレクターの統計情報を表示する

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

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

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

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

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

2. [ 高度なレンダリング インストルメンテーションを有効にする (低速)] チェック ボックスをオンにします。

   

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

4. [停止] をクリックします。

1 つのイベントの統計情報を表示する

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

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

2. パフォーマンス ツールの下部にある [セレクター統計] をクリックします。

   

パフォーマンス ツールの [セレクター統計] セクションには、各セレクターの次の情報を含む CSS セレクターの表が表示されます。

• ブラウザーがこのセレクターの照合に費やした時間。 この時間はマイクロ秒 (μs) で指定されます。1 μs は 1000 ミリ秒 (ms) の 1/1000、1/1,000,000 秒です。
• ブラウザー エンジンがこのセレクターと一致しようとした要素の数と、実際に一致した要素の数。
• セレクターを含むスタイルシート。

複数のイベントの統計情報を表示する

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

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

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

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

   

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

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

完全な記録の集計統計を表示する

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

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

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

3. パフォーマンス ツールの下部にある [セレクター統計] をクリックします。

   

セレクター統計の分析

セレクター統計テーブルに表示されるデータを昇順または降順で並べ替えるには、列ヘッダーをクリックします。 たとえば、最も時間がかかるセレクターを確認するには、 Elapsed (μs) 列ヘッダーをクリックします。

ブラウザーの計算に時間がかかり、何度も一致した CSS セレクターを見つけた場合は、試してみて改善することをお勧めします。 セレクターを変更して、計算に必要な時間を減らし、ページ上の要素の数を減らしてください。 CSS セレクターを改善する方法は、特定のユース ケースによって異なります。 前のセクションの手順を繰り返して、変更によって [スタイルの再計算 ] イベントの期間が短縮されたことを確認します。

関連項目

• パフォーマンス ツールの概要 - DevTools でのランタイム パフォーマンスの分析の概要。
• パフォーマンス機能リファレンス - パフォーマンス ツールの機能の多くについて説明します。
• CSS セレクターのパフォーマンスに関する真実 - Windows ブログ投稿。