ホームページ > 記事 > ウェブフロントエンド > CSSのパフォーマンスを向上させる方法

CSSのパフォーマンスを向上させる方法

不言オリジナル: 2018-06-12 15:54:131331ブラウズ

この記事では、CSS パフォーマンスを向上させるための CSS パフォーマンス最適化の方法を主に紹介します。標準以外の CSS は多くのパフォーマンス上の問題を引き起こすため、CSS パフォーマンス最適化の知識に興味のある友人は、CSS パフォーマンス最適化スキルを学習して習得することが非常に必要です。

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

CSS マッチング原則

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

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

//css   
.con .loulan1 p span{ display: block; }   
//html   
<p class="con">   
    <p class="loulan">   
        <p><span>文字</span></p>   
    </p>   
</p>

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

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

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

//css 
.loulanSpan{ display: block; }   
//html 
<p class="con">   
    <p class="loulan">   
        <p><span class="loulanSpan">文字</span></p>   
    </p>   
</p>

cssセレクターの重み

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

ID: 100

Class:10

。

タグ:1

上記の 2 つの基礎を踏まえて、CSS を最適化してパフォーマンスを向上させる方法について詳しく説明します。 1. CSS のネストを減らす。通常の状況では、ブロックレベルの要素を 3 つ以上ネストしないことが最善です。クラスを追加すると、CSS を記述するときに内部にインライン要素を追加する必要がなく、これにより CSS ファイルのサイズが削減されるだけでなく、パフォーマンスの無駄も削減されます。

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

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

4、省略形の css。maigin、padding、色の値などを含みます。margin-**** が 2 つ以上ある場合は、ファイルサイズを補助するために margin: * * * * と記述します。

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

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

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

8. 公開 CSS ファイルを分割する。大規模なプロジェクトの場合は、ほとんどのページの共通の構造スタイルを抽出して個別の CSS ファイルに配置できるため、もちろん、このアプローチは 1 回のダウンロード後にキャッシュに配置できます。追加の要望も追加される予定であり、具体的な取り組みについては実情に応じて判断する必要がある。

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

10、CSS レストの使用を減らすスタイルをリセットするのが標準だと思うかもしれませんが、実際には、ニーズや興味のある友人は、normolize.css

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

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

以上がこの記事の全内容です。その他の関連コンテンツについては、PHP 中国語 Web サイトをご覧ください。

CSSのパフォーマンスを向上させる方法

関連記事