CSS パフォーマンスの最適化_html/css_WEB-ITnose

CSS のパフォーマンスは、ページのリクエストの読み込み速度とレンダリング効率にも影響します。 要約すると、CSS のパフォーマンスの最適化には主に次の側面が含まれます:

1. CSS ファイルのサイズ圧縮 (主に CSS ファイルのバイト数を圧縮)。バンド サイズにより、特にトラフィックの多いページの場合、ネットワーク オーバーヘッドが増加します。主な方法は以下の通りです:

1. CSS ファイル内のスペースなどの不要な冗長文字を減らし、文法的に可能な限り多くの略語を使用します (margin 10px; など)。

2. 一部のブラウザは gzip 形式の圧縮ファイルの解凍をサポートしており、対応するファイルを gzip パッケージに圧縮するようにサーバーを設定できます。 S c c 2. 構造の抽出、CSS の分割、逆アセンブル、必要に応じて CSS ファイルをロードでき、機能のプロパティを可能な限り分割し、共通の属性を持つファイルをロードします。これにより、大規模な構造と混乱を招くロジックを含む CSS ファイル構造を回避できます。ただし、分割によってページ リクエストの数が増加する場合があるため、ページ全体に基づいて考慮する必要があります。

3. CSS 文法は主にセレクターの効率に重点を置いています:

セレクターを分析する最も基本的な原則は、セレクターの解析が右から左に行われることです。したがって、右端の選択はパフォーマンスに大きな影響を与え、一般にキー セレクターと呼ばれます。キーセレクターがより具体的であるほど、高速になります:

共通セレクターの効率的な並べ替え:

ID セレクター > クラスセレクター > 隣接セレクター (h1+p) > (ul>li)>子孫セレクター (li a) >ワイルドカード>属性セレクター (a[rel ="external"]) >擬似クラス セレクター (a: ホバー)

共通ルール:

1. 避けるID セレクターは、既に正確なラベルを見つけることができるため、親クラスを追加する必要がある場合、ページ ID が一意性に従っていないことを意味します。

2. クラス セレクターの前に親セレクターを追加する必要がある場合は、クラス セレクターに構造的な問題があることを示しているため、CSS を再構築することが最善です。

3. 子孫セレクターの使用は避けてください。子孫セレクターは、一致するラベルが見つかるまで、ルート ノードが見つかるまですべての親ノードを走査するため、パフォーマンスが大幅に消費されます

4. 子セレクターのキー セレクターは、できるだけ具体的である必要があります。

4. CSS ファイルの場所は、head に配置するのが最適です。つまり、ページ構造が解析されるときにページをレンダリングできます。本文内または本文の後に配置すると、ページが比較的大きくて読み込みが遅い場合、ユーザーには最初はレンダリングされていないページが表示され、ページが読み込まれるまでレンダリングは開始されないように見えます。