CSS パフォーマンス分析、CSS を最適化してパフォーマンスを向上させる方法

10年後の自分に向かって、お互い励まし合いましょう！

フロントエンドのパフォーマンスの最適化は常にホットなトピックであり、HTTP リクエストの削減、リソースのマージと圧縮のためのツールの使用、リクエストの繰り返しを避けるためのスクリプトの下部への配置など、ページのパフォーマンスを向上させるために常に最善を尽くしています。 . 、CSSスプライトなど実際、ファイル サイズの削減、リクエストの削減、JS の最適化などの方法が多数ありますが、CSS に注目している人はほとんどおらず、CSS を圧縮しない人さえいます。

実際、非標準の CSS は多くのパフォーマンスの問題を引き起こす可能性があります。これらの問題は、一部の小規模なプロジェクトでは十分に明らかではないかもしれませんが、大規模なプロジェクトでは明らかになるでしょう。

CSSマッチング原則

CSS を最適化する前に、CSS がどのように機能するかを理解する必要があります。CSS がセレクター、属性、属性値で構成されていることは誰もが知っています。

次のようなコード行を書くかもしれません

リーリー

ここではconクラスのloulanクラスのpタグにspanタグのスタイルを定義しています。実際、ブラウザを人間と考えると、レンダリング時にパフォーマンスが無駄になることは間違いありません。

そしてCSSのマッチング原則は左から右ではなく、右から左です、つまり、コード行では、まずページ内のすべてのspan要素を見つけてセットを形成します。次に、「すべてのスパン要素を上方向に検索」で、p 要素である親要素、または親要素が p 要素である親要素を持つスパンがいくつあるかを確認します。ゆっくりと検索して、親要素が p 要素ではないものを削除します。次に、コレクション内に p 要素がいくつあるかを検索して、その親要素のクラスが loulan であることを確認します... ブラウザーは次のように言いました: とても疲れています...

実際、ブラウザーが右から左に検索する利点は、無関係なスタイル ルールと要素をできるだけ早く除外できることです。 Firefox では、この検索メソッドをキーセレクター (キーワード クエリ) と呼びます。いわゆるキーワードは、スタイル ルールの最後 (右端) のルールです。上のキーは、span です。本来の目的は、無関係なスタイル ルールをできるだけ早く除外することです。ここで欠けているのは、停止することなくレイヤーを重ねていくことです。では、スパンのスタイルを定義したいだけの場合は、スパンにクラスを追加した方が良いのではないでしょうか?この時点で、すべての要素にクラスを追加する必要があるのか​​と言いたい人がいます。それは決して必要ではありませんが、ブラウザが一致を見つける方法を理解し、それを現在の構造と組み合わせて、最適かつ最も便利な記述方法を作成する必要があります。

リーリー

CSSセレクターの重み

これは CSS ID クラス タグ セレクターの重みであり、重みが大きいほど優先度が高くなります。

ID:100

クラス:10

タグ:1

上記の 2 つの基礎を踏まえて、CSS を最適化してパフォーマンスを向上させる方法について詳しく説明します

1. CSS のネストを減らす。一般に、ブロック レベルの要素はクラスとともに追加され、CSS を記述するときにブロック レベルのクラスをネストする必要はありません。インラインタグを使用すると、CSS ファイルのサイズが削減されるだけでなく、パフォーマンスの無駄も削減されます。

2. ID セレクターの前にネストしないでください。ID は本質的に一意であり、前にネストするとパフォーマンスが完全に無駄になります。

3. パブリック スタイル クラスを作成し、パブリック クラスと同じスタイルの長いセクションを抽出します。たとえば、通常はクリア フロートを使用したり、単一行を超えて省略記号を表示したりします。もちろん、Sass を使用する場合は、継承によって次のようになります。同時に、私は Sass の使用を推奨しており、将来的には Sass ブログを書くつもりです。

4. 略語 maigin、パディング、カラー値などを含む略語 CSS。margin-**** が 2 つ以上ある場合は、ファイルサイズを補助するために margin: * * * * と記述します。

5. ワイルドカード * や [hidden="true"] などのセレクターの使用を減らし、すべてを 1 つずつ検索します。このパフォーマンスは良いですか?もちろんスタイルのリセットなど必要なことは必須です。

6. より正確に配置するためにクラス名の前にタグ名 p.ty_p を追加することを好む人もいますが、これは多くの場合、パブリックが一意でない限り、クラス名をグローバル スコープ内に含める必要があるため、これは効率的ではありません。アプローチはインスタントラーメンになるはずです。

7. CSS の継承メカニズムを賢く使用します。色、フォントなど、CSS の多くの属性を継承できます。親ノードを定義したら、子ノードを定義する必要はありません。

8. パブリック CSS ファイルを分割する。大規模なプロジェクトの場合は、ほとんどのページの共通の構造スタイルを抽出して、それらを個別の CSS ファイルに配置できるので、もちろん、このアプローチは 1 回のダウンロード後にキャッシュに配置できます。追加の要求については、実際の状況に基づいて具体的なアプローチを決定する必要があります。

9. CSS 式を使用する必要はありません。CSS 式に触れる機会は少ないかもしれませんが、覚えておく必要があるのは、どんなにクールであっても、最終的には静的であるため、式はコードをよりクールに見せるだけであるということです。ただし、一度だけ計算されるわけではなく、小さなイベントによっては効果的かつ正確に実行するために必要な計算回数が増加する可能性があるため、その無駄は想像を超える可能性があります。

10. CSS レストの使用を減らします。スタイルをリセットするのが標準であると思われるかもしれませんが、実際には、ニーズや関心のある友人は、normolize.css を選択することができます。

11 の cssSprite は、すべてのアイコン画像を合成し、幅、高さ、および背景位置の背景画像を使用して、必要なアイコン画像を表示します。これは、http リクエストを大幅に削減する非常に実用的なテクニックです。

もちろん、その後の作業がまだ必要です。CSS 圧縮 (ここにオンライン圧縮 YUI Compressor があります。もちろん、他のツールを使用して圧縮することもできますが、非常に優れています)、GZIP 圧縮、Gzip は人気のあるファイル圧縮アルゴリズムです。詳細な方法Google または Baidu にすることができます。

もちろん、CSS パフォーマンス最適化テクニックはこれだけではない可能性があります。友達の追加や共有は大歓迎です。