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

改善方法: 1. CSS ファイルにスタイルを記述し、head 内で参照する; 2. "@import" を使用しない; 3. 複雑なセレクターの使用を避ける、レベルは少ないほど良い; 4 . ページのスタイル ファイルを合理化する; 5. CSS 継承を使用してコード量を削減する; 6. フローティング属性と位置決め属性を慎重に使用する; 7. さまざまなブラウザーのプレフィックスを標準化するなど。

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

ページの読み込みパフォーマンスと CSS コードのパフォーマンスに基づいて CSS パフォーマンスを向上させる方法。主なパフォーマンスは次のとおりです。 読み込みパフォーマンス (主にファイル サイズの削減から始まり、読み込みのブロックを軽減し、同時実行性の向上)、セレクターのパフォーマンス #、レンダリング パフォーマンス、保守性。

1. スタイルを別の CSS ファイルに記述し、head 要素で参照してみてください

(1) コンテンツとスタイルが分離されているため、管理と保守が簡単です

(2) ページ サイズを削減します

(3) CSS ファイルをキャッシュして再利用できるため、メンテナンス コストが削減されます

2. @import を使用しないでください

If @import を使用します。属性が CSS に導入されている場合、ユーザーが遅いインターネット速度で閲覧すると、スタイルのないページが表示されますが、CSS ファイルがダウンロードされると適切なスタイルが表示されるようになります

3. 複雑なセレクターの使用を避ける、レベルが少ないほど良い

プロジェクトにはますます多くのモジュールがあり、その機能はますます複雑になってきています。私たちが作成する CSS セレクターには内部に複数のレイヤーがあります。それらはますます複雑になります。セレクターのネストは 3 レベルを超えないようにすることをお勧めします。セレクターを簡潔にすると、CSS ファイルのサイズが削減され、ページの読み込みパフォーマンスが向上するだけでなく、ブラウザーが解析する際の効率も向上します。また、開発者の開発効率が向上し、開発コストやメンテナンスコストが削減されます。

4. ページのスタイル ファイルを合理化し、未使用のスタイルを削除します

(1) スタイル ファイルが大きすぎるため、読み込み速度に影響します

(2)ブラウザは冗長なスタイル マッチングを実行し、レンダリング時間に影響します。

現在のページで必要な CSS に従って、現在のページで使用されている CSS ファイルをマージします。1 つのファイルにマージすると、スタイル ファイルがブラウザによってキャッシュされるため、ダウンロードする必要がないという利点があります。他のページに入るときのスタイル ファイル。

5. CSS 継承を使用してコード量を削減する

一部の CSS コードは継承できることがわかっています。親要素がすでにスタイルを設定している場合、子要素はスタイルを設定する必要はありませんスタイルを設定します。これもパフォーマンスを向上させる実証済みの方法です。

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

一方で、フローティングのさまざまな複雑なレイアウト ルールは、探索的なローカル リフロー レイアウト アルゴリズムとなる予定です。ブラウザはそれを処理するのに多大な労力を要します。一方、フローティング要素のレイアウトには、さらに多くの要素が関係します。同じレイアウト空間内では、すべてのフローティング要素は「スタティック レイヤ」の上の「フローティング レイヤ」に存在し、フローティング レイヤ内の複数のフローティング要素は相互に影響を与えるだけでなく、スタティック レイヤとも相互作用します。

7. CSS スタイルのプレフィックス

ブラウザのプレフィックスを前に、標準のプレフィックスを後ろにして、さまざまなブラウザのプレフィックスを標準化します。

8.CSS 属性値

属性値が0の場合、単位は付加されません

属性値が浮動小数点数0.**の場合、小数点前の0は省略可能です

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