スタイル計算の範囲と複雑さを軽減

JavaScript は多くの場合、視覚的な変化を引き起こすトリガーとなります。場合によっては スタイル操作によって直接、場合によっては計算によって変更される データの検索や並べ替えなど、視覚的な変化をもたらすもの。タイミングが悪い、または JavaScript の実行時間がパフォーマンスの問題の一般的な原因である場合、 影響を最小限に抑えるよう心がけてください

スタイルの計算

要素の追加や削除、属性、クラスの変更による DOM の変更 またはアニメーションの再生を行うと、ブラウザが要素のスタイルを再計算し、 多くの場合はページの一部または全体のレイアウトです。このプロセスを 計算スタイルの計算。

ブラウザでは、最初に一致するセレクタのセットが作成され、 特定の要素に適用するクラス、疑似セレクタ、ID を決定します。 次に、一致するセレクタからスタイルルールを処理して、 要素の最終的なスタイルを指定します。

スタイルの再計算時間とインタラクションのレイテンシ

Interaction to Next Paint（INP）: ユーザー中心のランタイム ユーザー入力に対するページの全体的な応答性を評価するパフォーマンス指標。 ユーザーがページを操作してから、インタラクションのレイテンシを測定します。 ブラウザは、次のフレームをペイントし、対応するビジュアル アップデートを表示します。 表示されます。

インタラクションの重要な要素の 1 つは、次のインタラクションのペイントに要する時間です。 クリックします。次のフレームを表示するために行われるレンダリング作業は、多くの部分で構成されます。 レイアウト、ペイント、およびその直前に発生するページスタイルの計算など、 複雑な処理ですこのページでは、スタイル計算のコストに焦点を当てていますが、 レンダリング フェーズの一部でもあるため、 レイテンシ（スタイル計算を含む）

セレクタの複雑さを軽減する

セレクタ名をシンプルにすると、ページのスタイルが速くなります 計算できます。最もシンプルなセレクタは、CSS の要素を クラス名:

.title {
  /* styles */
}

しかし、プロジェクトが拡大するにつれ、より複雑な CSS が必要になり、 次のようなセレクタを使用します。

.box:nth-last-child(-n+1) .title {
  /* styles */
}

これらのスタイルをページにどのように適用するかを決定するには、ブラウザは 「これは、親が親である title のクラスを持つ要素ですか？」と クラスが box のマイナス n + 1 の子要素は？」 使用するセレクタによっては、これを把握するのに時間がかかることがあります。 問題のブラウザ。これを簡素化するために、セレクタを変更して クラス名にします。

.final-box-title {
  /* styles */
}

クラス名を置き換えると不自然に思われるかもしれませんが、 はるかにシンプルになりますたとえば以前のバージョンでは 要素はその型の最後の要素であるため、最初にその要素に関する 他の要素を使用して、後続の要素に nth-last-child である。この方法では、モデルよりもコンピューティング コストが 単にそのクラスが一致するという理由で、セレクタと要素が一致することはありません。

スタイルを設定する要素の数を減らす

パフォーマンスに関するもう一つの考慮事項（多くの場合、セレクタよりも重要な考慮事項） 複雑さとは、要素が変更されたときに行う必要のある作業の量です。

一般的に、計算された要素スタイルを計算するための最悪のケースのコストは 要素の数にセレクタ数を掛けた値になります。これは、 各要素を少なくとも 1 回はすべてのスタイルと照合して、 一致します。

スタイル計算で、無効化する代わりに、一部の要素を直接ターゲットにできる ページ全体に表示されます。最新のブラウザでは、これはあまり問題にならない傾向があります。これは、 ブラウザで、変更が影響を与える可能性のあるすべての要素を常にチェックする必要はありません。 一方、古いブラウザは、このようなタスクに必ずしも最適化されているとは限りません。説明 無効化される要素の数を減らす必要があります。

スタイルの再計算費用を測定する

スタイル再計算のコストを測定する方法の一つは、 パネルを開きます。開始する手順は次のとおりです。

1. DevTools を開きます。
2. [パフォーマンス] タブに移動します。
3. [Record] をクリックします。
4. ページを操作する。

録画を停止すると、次のような画像が表示されます。

<ph type="x-smartling-placeholder">

</ph>

上部のストリップはミニチュアのフレームチャートで、 なります。アクティビティがストリップの下部に近いほど、早くなります。 ブラウザがペイントしている最中です。フレームチャートが平行になって 上に赤いバーが付いている場合、 実行時間が長くなります。

<ph type="x-smartling-placeholder">

</ph>

スクロールのような操作中の長時間実行フレームは、閉じる価値があります。 見てください大きな紫色のブロックが表示されたら、アクティビティを拡大して、 「スタイルを再計算」というタイトルの作業を行い 時間をかける必要がありません。

<ph type="x-smartling-placeholder">

</ph>

イベントをクリックすると、そのコールスタックが表示されます。レンダリング処理の原因が ユーザー操作により、スタイル変更をトリガーした JavaScript が呼び出されます。 また、変更の影響を受ける要素の数も示されており、900 を少し上回る 要素の内容と、スタイルの計算にかかった時間を示しています。次を使用: この情報をもとにコードを修正します

ブロック、要素、修飾子を使用する

BEM（ブロック、要素、修飾子）などのコーディング アプローチ パフォーマンス上のメリットに合わせてセレクタを組み込みます。BEM が推奨するのは、 すべてに 1 つのクラスがあり、階層が必要な場合はその階層を 次のようにクラス名に埋め込まれます。

.list {
  /* Styles */
}

.list__list-item {
  /* Styles */
}

最後の子の例のように修飾子が必要な場合は、次のように追加できます。 これを次のように使用します。

.list__list-item--last-child {
  /* Styles */
}

BEM は、CSS を構造から整理するための優れた出発点 スタイル検索が簡素化されるからです

BEM が気に入らない場合は、別の方法で CSS に取り組むことができますが、 作業を開始する前に、パフォーマンスとエルゴノミクスを評価してください。

リソース

• Blink でのスタイル無効化
• BEM（ブロック、要素、修飾子）

Markus Spiske 著「Unsplash」のヒーロー画像