Web ページの読み込み効率に対する CSS の影響の分析と概要_エクスペリエンス交換

関連する知識や注意点を十数項目列挙しており、体系的に議論することで、作成したWebページをよりスムーズに開くことができます。
请不要告诉我、你看不懂E文、只是你不愿意看！！

1、スタイルシステムがルールをどのように破るか
スタイルシステムはルールを 4 つの主要なカテゴリに分類します。これらのカテゴリは、ルールの一致に関する限り、防御の第一線であるため、これらのカテゴリを理解することが重要です。以下の段落ではキーセレクターという用語を使用します。キー セレクターは、ID セレクター、クラス セレクター、またはタグ セレクターの右端にあるものとして定義されます。

1.1、ID ルール
最初のカテゴリは、キー セレクタとして ID セレクタを持つルールで構成されます。

button#backButton { } /* これは ID 分類のルールです */
#urlBar[type="autocomplete"] { } /* これは ID 分類のルールです */
Treeitem > treerow > treecell#myCell :active { } /* これは ID で分類されたルールです */
1.2、クラス ルール
ルールにキー セレクターとしてクラスが指定されている場合、そのルールはこのカテゴリに分類されます。

button.toolbarButton { } /* クラスベースのルール */
.fancyText { } /* クラスベースのルール */
menuitem > .menu-left[checked="true] "] { } /* クラスベースのルール */
1.3、タグ ルール
キーセレクターとしてクラスまたはIDが指定されていない場合、ルールの次の潜在的なカテゴリはタグカテゴリになります。ルールにキー セレクターとして指定されたタグがある場合、そのルールはこのカテゴリに分類されます。

td { } /* タグベースのルール */
treeitem > treerow { } /* タグベースのルール */
input[type="checkbox"] { } /*タグベースのルール*/
1.4、ユニバーサル ルール
他のすべてのルールがこのカテゴリに分類されます。


:table { } /* 普遍的なルール */
[hidden="true"] { } /* 普遍的なルール */
* { } /* 普遍的なルール*/
tree > [collapsed="true"] { } /* 普遍的なルール */
2、スタイル システムがルールとどのように一致するか
スタイル システムは、右端のセレクターから開始してルールと一致し、ルールのセレクターを介して左に移動します。小さなサブツリーがチェックアウトを続ける限り、スタイル システムは、ルールに一致するか、不一致により救済されるまで、左に移動し続けます。
防御の最初のラインは、キーセレクターのタイプに基づいて発生するルールフィルタリングです。この分類の目的は、ルールをフィルタリングして除外し、ルールを一致させるために時間を無駄にしないようにすることです。これがパフォーマンスを劇的に向上させる鍵となります。特定の要素について確認する必要があるルールが少ないほど、スタイルの解決はより速くなります。たとえば、要素に ID がある場合、要素の ID に一致する ID ルールのみがチェックされます。要素上で見つかったクラスのクラス ルールのみがチェックされます。タグに一致するタグルールのみがチェックされます。普遍的なルールは常にチェックされます。

3、効率的なCSSのためのガイドライン
3.1、普遍的なルールを避ける！
ルールが普遍的なカテゴリに入らないように注意してください。

3.2、タグ名やクラスでID分類ルールを修飾しない
キーセレクターとしてIDセレクターを持つスタイルルールがある場合は、タグ名も追加する必要はありません。ルール。ID は一意であるため、特別な理由もなく照合が遅くなることがあります。

复制代码代码如下:

BAD - button#backButton { }
BAD - .menu-left#newMenuIcon { }
GOOD - #backButton { }
GOOD - #newMenuIcon { }

3.3、クラスを修飾しない-分類されたタグ名付きルール
上記のルールと同様に、すべてのクラスは一意になります。使用する必要がある規則は、クラス名にタグ名を含めることです。

复制代码代次如下:

BAD - treecell.indented { }
良い - .treecell-indented { }

3.4、ルールをできるだけ具体的なカテゴリに入れるようにしてください。
私たちのシステムの速度低下の唯一の最大の原因は、タグ カテゴリにルールが多すぎることです。要素にクラスを追加することで、これらのルールをクラス カテゴリにさらに細分化できるため、特定のタグに対して多くのルールを一致させるために時間を無駄にすることがなくなります。


悪い - treeitem[mailfolder="true"] > treerow > treecell { }
良い - .treecell-mailfolder { }
3.5、子孫セレクターは避けてください。
子孫セレクターは、CSS で最も高価なセレクターです。特にセレクターを使用するルールがタグまたはユニバーサル カテゴリにある場合、非常に高価になります。多くの場合、本当に必要なのは子セレクターです。スキンのモジュール所有者の明示的な承認がない限り、UI CSS では子孫セレクターの使用が禁止されています。

悪い - treehead treerow treecell { }
良いですが、まだ悪い（次のガイドラインを参照） - treehead > treerow > treecell { }
3.6、タグ分類されたルールには子セレクターを決して含めないでください。
タグ分類されたルールで子セレクターを使用することは避けてください。その要素のすべての出現について、一致時間が大幅に増加します (特に、ルールが一致する可能性が高い場合)。


悪い - treehead > treerow > treecell { }
BEST - .treecell-header { }
3.7、子セレクターのすべての使用法に質問してください。
子セレクターの使用には注意してください。それを使用しなくても済む方法を思いついた場合は、そうしてください。特に、子セレクターは、R​​DF ツリーやメニューなどで頻繁に使用されます。


BAD - treeitem[IsImapServer="true"] > treerow > .tree-folderpane-icon { }
RDF の属性はテンプレート内で複製できることに注意してください。この事実を利用して、その属性に基づいて変更したい子 XUL 要素に RDF プロパティを複製します。


GOOD - .tree-folderpane-icon[IsImapServer="true"] { }
3.8、継承に頼ってください！
どのプロパティが継承されるかを学び、継承できるようにしましょう。 XUL ウィジェットを明示的に設定しました。これにより、list-style-image（ほんの 1 つの例）またはフォント ルールを親タグに配置でき、匿名コンテンツにフィルタリングされます。匿名コンテンツと直接対話するルールを作成するために時間を無駄にする必要はありません。


悪い - #bookmarkMenuItem > .menu-left { list-style-image: url(blah); }
良い - #bookmarkMenuItem { list-style-image: url(まあ); }
上記の例では、（リストスタイルイメージが継承することを理解せずに）匿名コンテンツのスタイルを設定したいという欲求により、このルールが実際にはクラスカテゴリに含まれるはずであるにもかかわらず、クラスカテゴリに含まれるルールが生じました。すべての特定のカテゴリ、ID カテゴリ。
特に匿名コンテンツの場合、それらはすべて同じクラスを持つことに注意してください。上記の悪いルールにより、すべてのメニューのアイコンがブックマーク メニュー項目に含まれているかどうかがチェックされることになります。これは恐ろしく高価です（メニューがたくさんあるため）。このルールは、ブックマーク メニュー以外のメニューによっても決してチェックされるべきではありません。

３．9、-moz-image-region を使用してください!
一連の画像を 1 つの画像ファイルに入れ、-moz-image-region でそれらを選択すると、各画像を独自のファイルに入れるよりもパフォーマンスが大幅に向上します。
原文 情報 － 著者: David Hyatt