ここで最初に思い浮かぶのは、使用しているレンダリング エンジンはどれくらい優れているかということです。
CSS のレンダリング/選択の効率を疑問視する場合、これは一般的なように聞こえますが、非常に重要です。たとえば、CSS ファイルの最初のルールが次のようになっているとします。
.class1 {
/*make elements with "class1" look fancy*/
}
したがって、非常に基本的なエンジンがそれを確認すると (これが最初のルールであるため)、DOM 内のすべての要素を調べて、class1それぞれに が存在するかどうかを確認します。より優れたエンジンは、おそらくクラス名を DOM 要素のリストにマップし、効率的なルックアップのためにハッシュテーブルのようなものを使用します。
.class1.class2 {
/*make elements with both "class1" and "class2" look extra fancy*/
}
この例の「基本エンジン」は、DOM の各要素を再訪して、両方のクラスを探します。より賢いエンジンは、DOM 内の要素の数n('class1')とn('class2')where is を class と比較し、最小のものを取ります。それが であると仮定すると、同様に持つ要素を探してすべての要素を渡します。n(str)strclass1class1class2
いずれにせよ、最新のエンジンは賢く (上記の例よりもはるかに賢く)、光沢のある新しいプロセッサは 1 秒間に数百万 (数千万) の操作を実行できます。DOM に何百万もの要素が含まれている可能性はほとんどないため、選択範囲 ( O(n)) のパフォーマンスが最悪の場合でもそれほど悪くはありません。
アップデート：
実際の実用的な証明を得るために、いくつかのテストを行うことにしました。まず、実際のアプリケーションで平均的にいくつの DOM 要素が見られるかを把握するために、いくつかの人気のあるサイトの Web ページに含まれる要素の数を見てみましょう。
Facebook: ~1900 要素 (個人のメイン ページでテスト)。
Google : ~340 要素 (メイン ページでテスト、検索結果なし)。
Google: ~950 要素 (検索結果ページでテスト済み)。
ヤフー！: ~1400 要素 (メイン ページでテスト済み)。
Stackoverflow: ~680 要素 (質問ページでテスト済み)。
AOL: ~1060 要素 (メイン ページでテスト済み)。
ウィキペディア: ~6000 の要素、そのうち 2420 はspansorではない (グリーに関するウィキペディアの記事anchorsでテスト済み)。Twitter: ~270 要素 (メイン ページでテスト済み)。
これらを合計すると、平均で約 1500 個の要素が得られます。ここで、いくつかのテストを行います。テストごとに、テストに応じて適切な属性を持つ1500 を生成しましdivsた (一部のテストでは他のテスト内にネストされています)。divs
テスト
スタイルと要素はすべて PHP を使用して生成されます。使用した PHP をアップロードし、インデックスを作成して、他のユーザーがローカルでテストできるようにしました。
結果：
各テストは 3 つのブラウザーで 5 回実行されます (平均時間が報告されています): Firefox 15.0 (A)、Chrome 19.0.1084.1 (B)、Internet Explorer 8 (C):
A B C
1500 class selectors (.classname) 35ms 100ms 35ms
1500 class selectors, more specific (div.classname) 36ms 110ms 37ms
1500 class selectors, even more specific (div div.classname) 40ms 115ms 40ms
1500 id selectors (#id) 35ms 99ms 35ms
1500 id selectors, more specific (div#id) 35ms 105ms 38ms
1500 id selectors, even more specific (div div#id) 40ms 110ms 39ms
1500 class selectors, with attribute (.class[title="ttl"]) 45ms 400ms 2000ms
1500 class selectors, more complex attribute (.class[title~="ttl"]) 45ms 1050ms 2200ms
同様の実験:
どうやら他の人も同様の実験を行っているようです。これにはいくつかの有用な統計もあります: little link .
要点:
レンダリング時に数ミリ秒 (1 ミリ秒 = 0.001 秒) を節約することに関心がない限り、あまり考えなくてもかまいません。一方、要素の大きなサブセットを選択するために複雑なセレクターを使用しないようにすることをお勧めします。これにより、顕著な違いが生じる可能性があります (上記のテスト結果からわかるように)。すべての一般的な CSS セレクターは、最新のブラウザーではかなり高速です。
チャット ページを作成していて、すべてのメッセージのスタイルを設定したいとします。div各メッセージはを持ち、 class を持つtitle内にネストされていることがわかります。メッセージを選択するために使用するのは正しいですが、効率的にも悪い習慣です。すべてのメッセージにクラスを指定し、そのクラスを使用してメッセージを選択する方が簡単で、保守しやすく、効率的です。div.chatpage.chatpage div[title]
ファンシーなワンライナーの結論：
「ええ、この CSS は理にかなっています」の範囲内であれば何でも構いません。
