私が学んだり、聞いたり、見たり、質問したりした CSS 作成の経験の一部を要約し、効率的な CSS を作成します。レンダリング効率と消費されるリソースに関連する CSS のレンダリング効率について話します。一部、私自身の理解に基づいて書いておりますので、間違いや漏れがある可能性は否定できません。
1. 16 進数のカラー値の数字と大文字小文字の組み合わせ
16 進数のカラー値を記述する場合は、小文字を使用するか、省略して 3 桁にすることができます。この記述方法がブラウザのレンダリング効率に影響を与えるかどうかを証明する決定的なデータはありませんが、16 進数のカラー値のデフォルトの標準です。 is 大文字と6桁の数字です。未知の状況でリスクを負いたくない場合、レンダリング効率が低下します。
* 不承認 - color:#f3a;
* 使用することをお勧めします - color:#FF33AA;
2. 表示と視認性の違い
これらは、オブジェクトを表示するかどうかを設定または取得するために使用されます。表示非表示オブジェクトは物理スペースを保持せず、可視性は非表示オブジェクトが占有する物理スペースを保持します。ブラウザが占有された物理スペースをレンダリングすると、リソースが消費されます。
* 非推奨 - 可視性:非表示;
* -display:none; の使用をお勧めします。
3. border:none と border:0 の違い。
表示と可視性の関係と同様に、スペースはそれぞれ確保されず、確保されます。 border:0; の詳細 境界線は非表示にすることができますが、border-color/border-style の使用は維持されます。
* 不承認 - border:0;
* - border:none; の使用をお勧めします。
4. 小さすぎる背景画像は並べて表示しないでください。
幅と高さが 1 ピクセルの背景画像のファイル サイズは非常に小さいですが、幅と高さが 500 ピクセルのパネルをレンダリングするには、タイリングを 2500 回繰り返す必要があります。背景画像のレンダリング効率の向上は、画像のサイズと容量に関係します。最大の画像ファイル サイズは依然として約 70 KB です。
* 不承認 - 幅と高さが 8 ピクセル未満の背景画像を並べて表示する
* 使用することをお勧めします - 適度なサイズとサイズの背景画像
5.IEフィルター
IE のフィルターには、リソースを消費するだけでなく、互換性の問題もあります。 PNG を透明にするフィルターがあります。GIF または JPG を透明にすることで、このフィルターの使用を回避できます。 IE7 以降ではすでに PNG 透明度がサポートされているため、IE6 では GIF 透明度のみを使用することをお勧めします。
* 不承認、IE フィルターの悪用はリソースを消費するだけでなく、互換性の問題も引き起こします。
* フィルターの使用を避けるために、他の方法を選択することをお勧めします。
6. *{margin:0;padding:0;} ブラウザのスタイルの違いを避けるため
* ワイルドカードはすべてのタグを初期化し、ブラウザーのレンダリングでは特定のリソースが消費されます。一部のタグは異なるブラウザでほぼ同じであるか、一部のタグは (使用しないため) ワイルドカードを再初期化する必要がなくなります。これにより、一部のリソースが節約されます。
* 非推奨です。* ワイルドカードを使用してください
* 不承認。内部および外部の塗りつぶしスタイルを制御するには、div スパン ボタン b テーブルおよびその他のタグをワイルドカードに含める必要があります。
* 内側と外側の塗りつぶしスタイルを制御するには、ワイルドカードを選択的に使用することをお勧めします。
7. クラスや ID を記述するために追加のタグを追加しないでください。
ID をキー セレクターとして使用するセレクターがある場合は、余分なタグ名を追加しないでください。 ID は一意であるため、理由もなく照合効率を低下させてはいけません。
* 非推奨 - button#backButton { }
* 非推奨 - .menu-left #newMenuIcon { }
* #backButton { } の使用を推奨します
* #newMenuIcon { } の使用を推奨します
8. セレクターを保存するために最も特別なクラスを選択してみてください
システム効率を低下させる最大の理由の 1 つは、タグ クラスで使用するセレクターが多すぎることです。要素にクラスを追加すると、カテゴリをクラスに細分化できるため、1 つのタグに対して多数のセレクターを照合するのに時間を無駄にする必要がなくなります。
* 非推奨 -treeitem[mailfolder="true"] >treerow>treecell { }
* - .treecell-mailfolder { } の使用を推奨します
9. 子孫セレクターを避ける
子孫セレクターは、CSS で最もリソースを消費するセレクターです。特にセレクターがラベル クラスまたは一般クラスを使用する場合、実際には非常にリソースを大量に消費します。多くの場合、本当に必要なのはサブセレクターです。明示的に記載されていない限り、UI CSS では子孫セレクターの使用は厳しく禁止されています。
* 非推奨 - ツリーヘッド ツリーロウ ツリーセル { }
* 改善されましたが、まだ機能していません (次の記事を参照) - Treehead > Treerow > Treecell { }
10. ラベル クラスにサブセレクターを含めないでください。
ラベル クラスではサブセレクターを使用しないでください。そうしないと、要素が出現するたびに照合時間がさらに長くなります。 (特にセレクターが一致する可能性が高い場合)
* 非推奨 - ツリーヘッド > ツリーロウ > ツリーセル { }
* - .treecell-header { } の使用を推奨します
11. すべてのサブセレクターの使用に注意してください
サブセレクターは慎重に使用してください。使用しない方法が思い当たる場合は、使用しないでください。特に、RDF ツリーとメニューでは、このようなサブセレクターが頻繁に使用されます。
* 非推奨 - Treeitem[IsImapServer="true"] > Treerow > .tree-folderpane-icon { }
RDF プロパティはテンプレートにコピーできることに注意してください。これを使用すると、その属性に基づいて変更する子 XUL 要素の RDF 属性をコピーできます。
* .tree-folderpane-icon[IsImapServer="true"] { } を使用することをお勧めします。