フロントエンドパフォーマンス最適化のCSS解釈の具体的な分析

@import の使用は避けてください

外部 CSS ファイルで @import を使用すると、ページの読み込み時に余分な遅延が発生します。

CSS ファイル first.css には、@import url("second.css") の内容が含まれています。ブラウザーはまず first.css をダウンロード、解析、実行し、次に 2 番目のファイル Second.css を検出して処理します。簡単な回避策は、@import の代わりに タグを使用することです。これにより、CSS ファイルが並行してダウンロードされ、ページの読み込みが高速化されます。

AlphaImageLoader フィルターを使用しないでください

IE の固有の属性。7.0 より前のバージョンで表示される PNG 画像の半透明効果を修正するために使用されます。

問題: ブラウザーが画像をロードすると、コンテンツのレンダリングが終了し、ブラウザーがフリーズします。これにより、各要素 (画像だけでなく) ごとに計算が行われるため、メモリ消費量が増加します。

解決策: 1. 代わりに PNG8 形式を使用してください。この形式は IE で適切に機能します。 A 2. 確かに、IE7 以降のユーザーを無効にするには、AlphaImageLoader を使用して次の行 _filter を使用する必要があります。

CSS 式を避ける

例:

background-color: expression((new Date()).getHours()%2?"#FFFFFF": "#000000" );

CSS 式は、CSS プロパティを動的に設定する強力な (ただし危険な) 方法です。 Internet Explorer では、バージョン 5 以降の CSS 式がサポートされています。

問題: ページの表示、ズーム、スクロール、またはマウスの移動時に再計算されます。 CSS 式にカウンターを追加して、式が評価される頻度を追跡します。ページ上でマウスを動かすだけで、10,000 を超える計算を簡単に実行できます。

解決策: CSS 式の計算の数を減らす方法は、1 回限りの式を使用することです。これにより、初回実行時に結果が指定されたスタイル属性に割り当てられ、この属性を使用して CSS 式が置き換えられます。ページ サイクル中にスタイル プロパティを動的に変更する必要がある場合は、CSS 式の代わりにイベント ハンドラーを使用することが現実的なオプションです。 CSS 式を使用する必要がある場合は、CSS 式が何千回も評価され、ページのパフォーマンスに影響を与える可能性があることを必ず覚えておいてください。

ワイルドカード セレクターを避ける

CSS を学習した初期の頃、Web ページを作成するときによく使用したのは、ラベルのデフォルト レイアウトと、同じレンダリングに対する異なるブラウザー間の違いを排除するためでした。ラベルの。

そして、リセットがどのように書かれているかを時々見かけます。

body,p,h1,h2,h3,h4,h5,input,select,textarea,table{margin：0；padding：0;}

なぜこの人たちはこのように書くのでしょうか?その答えは次の内容で得られます

例:

#header > a {font-weight:blod;}

CSSセレクターは右から左にルールを照合します。 。したがって、ブラウザでは、このステートメントは次のように実装されます: ブラウザはすべての a 要素を走査します— —>親要素の ID がヘッダーであるかどうか。 例:

この例は前の例よりも時間がかかります ページ内のすべての要素を走査します—>ルートノードまでその上位要素まで走査します

例:

#header  a {font-weight:blod;}

ドキュメント内のすべての要素とレベルごとに選択されたクラスと一致します

したがって、ワイルドカードセレクターの使用は避けるべきです。

まず、不要なスタイルを削除すると、スタイルファイルのサイズが削減され、リソースのダウンロードが高速化されます

次に、ブラウザの場合、すべてのスタイルルールは次のようになります。現在のページに一致するルールがない場合でも、解析され、インデックスが作成されます。一致しないルールを削除し、インデックス項目を減らし、ブラウザの検索を高速化します。

単一ルールの属性セレクターを回避します。

ブラウザはすべての要素に一致します。href 属性が存在し、herf 属性の値が「#index」と等しいかどうかを確認します。 ——> ドキュメントのルート ノードまで、選択したクラスの要素をレベルごとに照合します。

正規のような属性セレクターを避ける

正規表現のマッチングは、カテゴリベースのマッチングよりもはるかに遅くなります。ほとんどの場合、属性セレクターには *=、|=、^=、$=、および ~= 構文の使用を避ける必要があります。

以上がフロントエンドパフォーマンス最適化のCSS解釈の具体的な分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。