パフォーマンスを考慮してより良いCSSを書く方法

今日の記事では、サイトのパフォーマンスを向上させるためにCSSで行えるコードの選択について考察します。しかし、これらの選択肢を詳しく説明する前に、まずWebページのレンダリングワークフローを詳しく見てみましょう。CSSを介して解決可能な問題のある（パフォーマンス的な）分野.

これは、DOMツリーの作成後にブラウザによって実行される操作の大まかな流れです。

スタイルを再計算（およびツリー作成をレンダリング）. ブラウザは、DOMツリーの要素に適用されるスタイルを計算します。レンダリングされないノード（要素）をDOMツリーから破棄しながら、レンダリングツリーが後で作成されます。 表示：なし）とであるもの（擬似要素）.
レイアウト（リフロー）. 以前に計算されたスタイルを使用して、ブラウザはページ上の各要素の位置とジオメトリを計算します。.
再塗装. レイアウトがマッピングされると、ピクセルが画面に描画されます.
複合層. 再塗装中、塗装は異なるレイヤーで自律的に行われることがあります。それらのレイヤーは、最終的に一緒に結合されます.

それでは、パフォーマンスの高いCSSコードを書くために、操作の最初の3段階でできることを続けましょう。.

1.スタイル計算を減らす

前述のように、「スタイルの再計算」段階では、ブラウザは要素に適用されるスタイルを計算します。これを行うために、ブラウザはまず、DOMツリー内の特定の要素ノードを指すCSS内のすべてのセレクタを見つけます。それから、それはそれらのセレクターのすべてのスタイルルールを通り抜けて、どれが実際に要素に適用されるべきであるかについて決定します.

費用のかかるスタイル計算を避けるため, 複雑でネストしたセレクタを減らす ブラウザがどの要素をセレクタが参照しているのかを判断しやすくするためです。これにより計算時間が短縮されます。.

その他の採用方法 スタイルルールの数を減らす （可能であれば）, 未使用のCSSを削除する そして避けて 冗長性とオーバーライド, スタイル計算中にブラウザが同じスタイルを何度も繰り返す必要がないようにする.

2.リフローを減らす

要素内のリフローやレイアウト変更は非常に「高価な」プロセスであり、レイアウト変更を経た要素にかなりの量の子がある場合、それらはさらに大きな問題になる可能性があります。 階層を下ってカスケードするリフロー）.

高さやフォントサイズなどの幾何学的プロパティの変更、要素へのクラスの追加または削除、ウィンドウのサイズ変更、アクティブ化など、要素に対するレイアウトの変更によって、リフローが発生します。 ホバー, JavaScriptなどによるDOMの変更.

スタイル計算と同じように、リフローを減らす, 複雑なセレクタを避ける そして 深いDOMツリー （繰り返しますが、これはリフローの過度のカスケードを防ぐためです）.

ページ内のコンポーネントのレイアウトスタイルを変更する必要がある場合, 要素の階層の最下位にある要素のスタイルをターゲットにします。 コンポーネントの構成要素です。これは、レイアウトの変更によって他の（ほとんど）リフローが引き起こされないようにするためです。.

レイアウトを変更する要素をアニメートしている場合, ページフローから外す によって それを絶対に位置付ける, 絶対位置にある要素をリフローしても、ページ上の他の要素には影響がないからです。.

要約すると：

レイアウト変更時にDOMツリーの下位にあるターゲット要素
レイアウト変更アニメーションのために絶対配置要素を選択する
可能な限りレイアウトプロパティをアニメートしない

3.塗り替えを減らす

再描画とは、画面上のピクセルの描画を指し、リフローと同様に高価なプロセスです。再描画は、リフロー、ページスクロール、色、可視性、不透明度などのプロパティの変更によって発生します。.

頻繁で莫大な塗り替えを避けるため, コストのかかる再描画の原因となるプロパティを少なくする 影のように.

Repaintを直接または間接的にトリガーすることができる要素のプロパティをアニメートしている場合、それは大きな利点になります。 その要素がそれ自身のレイヤーにある場合 その塗装作業がページの他の部分に影響を与え、ハードウェアアクセラレーションを引き起こすのを防ぎます。ハードウェアアクセラレーションでは、GPUがレイヤ内でアニメーションの変更を実行するタスクを引き受け、プロセスを高速化しながらCPUの余分な作業を節約します。.

一部のブラウザでは, 不透明度 （より小さい値で 1）と 変形する （以外の値 無し）が自動的に新しいレイヤに昇格され、ハードウェアアクセラレーションがアニメーションやトランジションに適用されます。アニメーションのためにこれらの特性を好むのは、したがって良いことです。.

強制的に 要素を新しい層に昇格させてハードウェアアクセラレーションに入る アニメーションには、2つの手法があります。

追加する 変換：translate3d（0、0、0）; アニメーションやトランジションのためにブラウザを騙してハードウェアアクセラレーションを起動させる.
を追加 変更されます これは、将来要素内で変更される可能性があるプロパティをブラウザに通知します。. 注意：Sara Soueidanが、Dev.Operaのサイトでこれに関する詳細で非常に役立つ記事を公開しています。.

要約すると：

リペイントの原因となる高価なスタイルを避ける
多大なアニメーションやトランジションのためのレイヤープロモーションとハードウェアアクセラレーションを探す.

メモを取る

（1）これまでのところ、CSSファイルサイズの縮小については触れていません。スタイルルール（およびDOM要素）を減らすと、次の理由によりパフォーマンスが大幅に向上すると述べました。 ブラウザがどれだけ動作する必要があるか もっと少なく スタイルを計算するプロセスについて. このコード削減の結果として、より良いセレクターを書くことと使われていないCSSを削除すること, ファイルサイズは自動的に小さくなります.

（2）それはまたお勧めです JavaScriptで要素のスタイルにそれほど多くの結果的な変更を加えないでください。. 代わりに、これらの変更を行うための新しいスタイルを保持するクラスを（JavaScriptを使用して）要素に追加します - これは不必要なReflowsを防ぎます.

（3）あなたは レイアウトスラッシングを避ける JavaScriptを使用して要素のLayoutプロパティにアクセスして変更することによっても発生します（強制同期リフロー）。これによりパフォーマンスがどのように低下するかについては、こちらを参照してください。.