CSSの最適化、パフォーマンスを向上させる方法は何ですか

方法: 1. CSS を圧縮してファイル サイズを削減する; 2. リンクを使用して CSS ファイルをインポートする; 3. CSS レイアウトを合理的に設計し、スタイルの再利用に注意し、レンダリングにかかる​​時間を短縮する; 4. を使用するless "* " セレクター; 5. フローティングや位置決めなどの高パフォーマンスの属性は注意して使用してください; 6. ページの再配置と再描画を最小限に抑えます; 7. 属性値が 0 の場合は、ユニットを追加しないでください。

このチュートリアルの動作環境: Windows 7 システム、CSS3&&HTML5 バージョン、Dell G3 コンピューター。

CSS の最適化は主に 4 つの側面に焦点を当てています:

• 読み込みパフォーマンス

  主にファイル サイズの削減と読み込みのブロックの削減、同時実行性の向上

• セレクターのパフォーマンス

• レンダリング パフォーマンス

• 保守性、堅牢性

詳しくご紹介します。

読み込みパフォーマンス:

1. CSS 圧縮: 記述された CSS をパックして圧縮すると、ボリュームを大幅に削減できます。

#2. CSS 単一スタイル: 下マージンと左マージンが必要な場合、

何度も選択します:

margin: top 0bottom 0;

But

margin-bottom:bottom;margin-left: left;実行効率が高くなります;

3. @import の使用を減らし、リンクを使用することをお勧めします。ページにロードされる 前者は、ロードする前にページがロードされるのを待つことです;

4. CSS レイアウトを合理的に設計し、スタイルの再利用に注意を払い、レンダリングにかかる​​時間を短縮します。クラスと ID を選択するときは、* などのグローバルな一致をあまり使用せず、基本スタイルを適切に設定し（table{} の設定など）、再利用性を高めます。

セレクターのパフォーマンス:

CSS セレクターは右から左に照合されます。子孫セレクターを使用する場合、ブラウザーはすべての子要素を走査して、それが指定された要素であるかどうかを判断します。

#**ワイルドカード ルールの使用は避けてください** *{} など 計算量がすごい！

** 使用する必要がある要素のみを選択してください。選択するタグはできるだけ少なくしてください。ただし、class**

を使用してください。例: #nav li{ }次のように、nav_item のクラス名を li, select .nav_item{} に追加できます。

**タグを使用して ID またはクラス セレクターを制限しないでください**

例: ul#nav は #nav に簡略化する必要があります

##**子孫セレクターの使用をできる限り少なくし、セレクターの重み値を減らします**

子孫選択 セレクターのオーバーヘッドが最も高くなります。セレクターの深さを最小限に抑えるようにしてください。最大値が 3 レベルを超えないようにしてください。各タグ要素を関連付けるには、より多くのクラスを使用してください。

**継承を考慮する**

どのプロパティを継承できるかを理解し、これらのプロパティのルールを繰り返し指定しないようにします

レンダリング パフォーマンス:

1. 高パフォーマンスの属性を慎重に使用: フローティングと位置決め;

2. ページの再配置と再描画を最小限に抑える;

CSS の記述順序に従って再配置します。

位置: 位置、上、左、z-index、float、dispay

• ##サイズ: 幅、高さ、マージン、パディング

• テキスト シリーズ: フォント、行の高さ、色、文字間隔

• 背景の境界線: 背景、境界線

• その他: アニメーション、トランジション

• ##再描画: 境界線、アウトライン、背景、ボックスシャドウ。背景色を使用できる場合は、背景を使用しないでください。

## (学習ビデオ共有:
• css ビデオ チュートリアル

  )

3. 空のルールを削除します: {};

4. 属性値が次の場合0、追加単位なし; 5. 属性値は浮動小数点 0.** で、小数点の前の 0 は省略できます;

6. さまざまなブラウザーのプレフィックスを標準化します。ブラウザのプレフィックスが付いたものが最初に表示されます。標準属性は最後に来ます;

7. CSS の読み込み速度に影響する @import プレフィックスは使用しないでください;

8. CSS 継承プロパティを最大限に活用して、コード;

9. 共通のスタイルを抽象化および抽出してコードの量を削減します;

10. セレクターのネストを最適化し、深すぎるレベルを避けるようにします;

11. CSS スプライト画像、同じページ内の同様の部分に小さいもの アイコンはページリクエスト数を減らすことができて便利ですが、同時に画像自体が大きくなってしまいますので、使用する場合はメリット・デメリットをよく考えて使用してください。 ;

12. CSS ファイルをページの上部に配置します

保守性と堅牢性:

1. 抽出同じ属性を持つスタイルを統合し、クラスを通じてページ内で使用して CSS の保守性を向上させる; 2. 前のものに続き、oocss も CSS のパフォーマンスを向上させる方法の 1 つです。再利用可能で意味的に優れた基本クラスを定義し、それらを HTML に追加することは、多くの UI フレームワークで使用されるメソッドでもあります (例: class="btn btn-active btn-blue"; 3)。スタイルとコンテンツの定義: CSS コードを外部 CSS に定義します;

4. コンテナーとスタイルの分離;

プログラミング関連の知識の詳細については、こちらをご覧ください:

プログラミング ビデオ

! ！

以上がCSSの最適化、パフォーマンスを向上させる方法は何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。