[Performance] パネルの各長時間実行タスクには、右上の赤い三角形と [Summary] タブに警告が表示されます。これは、実行に時間がかかり、パフォーマンスが遅いメインスレッドでの作業を示すものです。
![[Summary] タブに赤い三角形と警告が表示された長いタスク。](https://developer.chrome.com/static/docs/devtools/performance/selector-stats/image/long-task.png?hl=ja)
パフォーマンスの録画では、このような長時間実行タスクの一部がスタイルを再計算イベントである場合があります。Recalculate Style イベントは、ブラウザが以下を実行するのにかかる時間を追跡します。
- ページ上の DOM 要素を反復処理して、特定の要素に一致するすべての CSS スタイルルールを見つけます。
- 一致する CSS スタイルルールに基づいて、各要素の実際のスタイルを計算します。
以下のような CSS ルールの適用範囲が変更された場合は、常に CSS スタイルを再計算する必要があります。
- DOM への要素の追加または削除。
- クラスや ID 属性の値など、要素の属性が変更された場合。
- ユーザーがマウスの移動や要素のフォーカスの変更などの入力を行うと、
:hoverルールに影響する可能性があります。
長時間実行されている [スタイルを再計算] イベントがある場合は、[Selector Stats] タブを使用して、最も時間がかかってパフォーマンスを低下させている CSS セレクタを把握できます。
[Selector Stats] タブには、パフォーマンス記録内の 1 つ以上の Recalculate Style イベントに関連する CSS ルール セレクタに関する統計情報が表示されます。
Selector Stats を有効にしてパフォーマンス トレースを記録する
長時間実行されているスタイルを再計算イベント中に CSS ルールセレクタの統計情報を表示するには、[Selector Stats] キャプチャ設定をオンにしてパフォーマンス トレースを記録します。
セレクタの統計情報を使用してパフォーマンス トレースを記録するには:
ウェブページ（Photo Gallery のデモページなど）を開きます。
DevTools を開き、[パフォーマンス] パネルに移動します。
[パフォーマンス] パネルで、設定の [キャプチャ設定] ボタンをクリックし、[CSS セレクタの統計情報を有効にする] チェックボックスをオンにします。
![[CSS セレクタの統計情報を有効にする] 設定をオンにしました。](https://developer.chrome.com/static/docs/devtools/performance/selector-stats/image/selector-stats-setting.png?hl=ja)
[radio_button_checked 記録] をクリックし、改善したいシナリオを実行してから、radio_button_checked [停止] をクリックします。
次のセクションで説明するように、CSS セレクタの統計情報を表示します。
1 つのイベントの CSS ルールセレクタの統計情報を表示する
単一の「スタイルを再計算」イベントに関連する CSS ルールセレクタの統計情報を表示するには:
パフォーマンス データで [スタイルを再計算] イベントを探してクリックします。
[パフォーマンス] パネルの下部で、[Selector Stats] タブを開きます。
![[Selector Stats] タブ。](https://developer.chrome.com/static/docs/devtools/performance/selector-stats/image/selector-stats-tab.png?hl=ja)
[Selector Stats] タブの CSS セレクタの表
[Selector Stats] タブには、CSS セレクタの表があります。表には、各 CSS セレクタに関する次の情報が表示されます。
| 列 | 説明 |
|---|---|
| 経過時間（ミリ秒） | ブラウザがこの CSS セレクタの照合に費やした時間。この時間はミリ秒（ms）で示され、ここで、1 ms は 1/1000 秒です。 |
| 一致試行回数 | ブラウザ エンジンがこの CSS セレクタと照合しようとした要素の数。 |
| 一致数 | ブラウザ エンジンがこの CSS セレクタと一致した要素の数。 |
| 低速パスの不一致の割合（%） | この CSS セレクタに一致しない要素と、ブラウザ エンジンが照合を試みた要素、およびブラウザ エンジンが照合にあまり最適化されていないコードを使用する必要があった要素の割合です。 |
| セレクタ | 一致した CSS セレクタ。 |
| スタイルシート | CSS セレクタを含む CSS スタイルシート。 |
完了したら、[パフォーマンス] パネルで、[設定] の [キャプチャ設定] を開き、check_box [CSS セレクタの統計情報を有効にする] をオフにします。
複数のイベントの CSS ルールセレクタの統計情報を表示する
複数の Recalculate Style イベントに関連する CSS ルールセレクタの統計情報を集計するには、次のように複数の Selector Stats テーブルをスプレッドシートにコピーします。
最初の [スタイルを再計算] イベントを探して、クリックします。
[パフォーマンス] パネルの下部で、[Selector Stats] タブを開きます。
セレクタの統計情報の表を右クリックして、[表をコピー] を選択します。
![プルダウン メニューの [表をコピー] オプション。](https://developer.chrome.com/static/docs/devtools/performance/selector-stats/image/copy-table.png?hl=ja)
コピーした表を Google スプレッドシートなどのスプレッドシートに貼り付けます。
確認したい他の Recalculate Style イベントを使用して、前の手順を繰り返します。
完了したら、[パフォーマンス] パネルで、[設定] の [キャプチャ設定] を開き、check_box [CSS セレクタの統計情報を有効にする] をオフにします。
記録全体に関する CSS ルールセレクタの統計情報の集計を表示する
パフォーマンスの記録全体に関連する CSS ルールセレクタの統計情報の集計を表示するには:
フレーム チャートの空白部分をクリックして、選択可能なイベントの選択を解除します。
録音範囲全体を選択します。これを行うには、[Performance] パネルの上部にある CPU チャートをダブルクリックします。
[パフォーマンス] パネルの下部で、[Selector Stats] タブを開きます。上部に新しい行が表示され、すべてのセレクタの合計に関するデータが表示されます。
完了したら、[パフォーマンス] パネルで、[設定] の [キャプチャ設定] を開き、check_box [CSS セレクタの統計情報を有効にする] をオフにします。
CSS セレクタの統計情報を分析する
[Selector Stats] 表のデータを昇順または降順で並べ替えるには、列ヘッダーをクリックします。たとえば、最も時間がかかっている CSS セレクタを確認するには、[経過時間（ミリ秒）] 列ヘッダーをクリックします。
ウェブページのパフォーマンスを改善するには、次の CSS セレクタに着目します。
- 計算に時間がかかっている（[経過時間（ミリ秒）] の値が高い）。
- ブラウザが何度も照合を試みた（Match Attempts の値が高い）。
- ブラウザが実際には多くの要素と照合できなかったもの（[Match Attempts] の値と比較して [Match Count] の値が小さい）。
- 低速パスの不一致の割合が高い。
たとえば、前のスクリーンショットでは、
- 最初の CSS セレクタ（
html body .ps[tooltip...）に最も時間がかかりました。 - ブラウザ エンジンはこの CSS セレクタの一致を 1, 104 回試みましたが、どの要素とも一致しませんでした。
したがって、この CSS セレクタは改善を試みる最初の候補となります。
CSS セレクタを変更して、ページ上の要素の計算と照合に要する時間を減らしてみてください。CSS セレクタを改善する方法はユースケースによって異なります。
このチュートリアルの手順を繰り返して、[経過時間（ミリ秒）] 列の [スタイルを再計算] イベントの期間を短縮したことを確認します。