CSS Web ページのレンダリング効率を向上させるために注意すべき 11 のこと_Experience Exchange

1. 16 進数のカラー値の桁数と大文字と小文字

16 進数のカラー値を記述する場合、小文字を使用することも、3 桁を省略することもできますが、この書き方に関する具体的なデータは見つかりませんでした。ブラウザのレンダリング効率に影響があるかどうかを証明しますが、16進数のカラー値のデフォルト標準は大文字で6桁の表記です。未知の状況でリスクを負いたくない場合、レンダリング効率が低下します。

* 不承認 - color:#f3a;

* 推奨 - color:#FF33AA;

2. 表示と視認性の違い

使用されているものオブジェクトを表示するかどうかを設定または取得します。表示非表示オブジェクトは物理スペースを保持せず、可視性は非表示オブジェクトが占有する物理スペースを保持します。ブラウザが占有された物理スペースをレンダリングすると、リソースが消費されます。

* 不承認 - 可視性:非表示;

* 推奨 - 表示:なし;

3. border:none; と border:0; の違い
表示と可視性の関係は同様で、それぞれスペースがない場合と予約されたスペースがあります。 border:0; の詳細については、境界線を非表示にすることもできますが、border-color/border-style の使用は維持されます。

* 不承認 - border:0;

* 推奨 - border:none;

4. タイルに対して小さすぎる背景画像を使用することはお勧めできません。
>
幅と高さが 1 ピクセルの背景画像。ファイル サイズは非常に小さいですが、幅と高さが 500 ピクセルのパネルをレンダリングするには、タイリングを 2500 回繰り返す必要があります。背景画像のレンダリング効率の向上は画像のサイズと容量に関係しますが、最大の画像ファイル サイズは依然として約 70KB です。

* 不承認 - 幅と高さが 8 ピクセル未満のタイル背景画像

* 推奨 - 適度なボリュームとサイズの背景画像

5. IE フィルタの使用には注意してください

IE フィルタには、リソースの消費に加えて、互換性の問題もあります。 PNG を透明にするフィルターがありますが、GIF または JPG を透明にすることでこのフィルターの使用を回避できます。 IE7 以降ではすでに PNG 透明度がサポートされているため、IE6 では GIF 透明度のみを使用することをお勧めします。

* 不承認。IE フィルタを悪用すると、リソースが消費されるだけでなく、互換性の問題が発生します。

* フィルタの使用を避けるために、他の方法を選択することをお勧めします。


6. ブラウザーのスタイルの違いを避けるための *{margin:0;padding:0;}

* ワイルドカードはすべてのタグを初期化し、ブラウザーのレンダリングに一定の時間がかかりますリソース。一部のタグは、異なるブラウザでほぼ同じであるか、一部のタグは推奨されなくなります (使用しないため)。ワイルドカードを再初期化する必要はありません。これにより、一部のリソースを節約できます。

* 不承認、* ワイルドカードを使用します。

* 不承認、div、span ボタン、b テーブル、およびその他のタグは、内部および外部の塗りつぶしスタイルを制御するためにワイルドカードに含める必要があります。

* 推奨、 be selective ワイルドカードを使用して、内側と外側のパディング スタイルを制御します。

7. クラスや ID を記述するタグを追加しないでください。

ID をキー セレクターとして使用するセレクターがある場合は、余分なタグ名を追加しないでください。 ID は一意であるため、理由もなく照合効率を低下させてはいけません。

* 不承認 - button#backButton { }

* 不承認 - .menu-left #newMenuIcon { }

* 推奨 - #backButton { }

* 使用することをお勧めします - #newMenuIcon { }

8. セレクターを保存するために最も特別なクラスを選択するようにしてください

システム効率を低下させる最大の理由の 1 つは、Too を使用することです。多くのセレクター。要素にクラスを追加すると、カテゴリをクラスに細分できるため、1 つのタグに対して多数のセレクターを照合するために時間を無駄にする必要がなくなります。

* 不承認 -treeitem[mailfolder="true"] >treerow >treecell { }

* 使用推奨 - .treecell-mailfolder { }

9. 子孫を避けるセレクター

子孫セレクターは、CSS で最もリソースを消費するセレクターです。特にセレクターがラベル クラスまたは一般クラスを使用する場合、実際には非常にリソースを大量に消費します。多くの場合、本当に必要なのはサブセレクターです。明示的に記載されていない限り、UI CSS では子孫セレクターの使用は厳しく禁止されています。

* 同意しません - Treehead Treerow Treecell { }

* より良いですが、まだ良くありません (次の記事を参照) - Treehead > Treerow > Treecell { }

10. タグ 実行クラスにサブセレクターを含めない

ラベル クラスにサブセレクターを使用しないでください。そうしないと、要素が出現するたびに照合時間がさらに長くなります。 (特にセレクターが一致する可能性が高い場合)

* 非推奨 -treehead >treerow >treecell { }

* 推奨 - .treecell-header { }

11.すべてのサブセレクターの使用に注意してください

サブセレクターは慎重に使用してください。使用しない方法が思い当たる場合は、使用しないでください。特に、RDF ツリーとメニューでは、このようなサブセレクターが頻繁に使用されます。

* 不承認 - Treeitem[IsImapServer="true"] > Treerow > .tree-folderpane-icon { }

RDF 属性はテンプレートにコピーできることに注意してください。これを利用して、その属性に基づいて変更したい子 XUL 要素の RDF 属性をコピーできます。

* - .tree-folderpane-icon[IsImapServer="true"] { }
の使用をお勧めします。