最速のCSSセレクタ？

私はポップアップIDが "ポップアップ"で、その中に左側に1つ、右側に1つ、クラス "popupbutton"という2つのボタンがあり、これらのCSSルールのうち、どれが最も効率的です：最速のCSSセレクタ？

2012-02-09 Wesley

何を選択しようとしていますか？ – paislee

あなたがCSSのスピードを気にする必要があるならば、Idkはどれくらいスタイリングしていますか？ –

それについても考えないでください。 – BoltClock

.popupbutton

クラスのレンダリングCSSでGoogle PageSpeed tipsを確認してください。しかし、あなたがそれに落ちると、あなたは20-50msのようなものを自分で節約しています（これは重要かもしれません）。

かなり良いテストが行わありますあなたは、複数のブラウザ間でCSSセレクタの速度の違いを見てそのことについて、ここで読むことができます：http://www.stevesouders.com/blog/2009/03/10/performance-impact-of-css-selectors/

我々が見れば、すべてのブラウザ全体の平均減速は50msであり、大きなもの（IE 6 & 7、FF3）では、平均デルタはわずか20ミリ秒です。今日のユーザーの70％以上では、これらのCSSセレクタを改善すると20ミリ秒の改善しか得られません。

この記事からわかるように、セレクタの速度の差はかなり低く、これらのテストは非常に堅牢なDOMの例とは対照的でした。

2012-02-09 19:24:51

合意しました！ CSSセレクタの効率は、大規模な要素セットを選択する場合にのみ重要になります*。それを微調整と見なし、心配しないでください。 –

.popupbuttonが最速のセレクタで、速くなります

2012-02-09 19:15:38

おそらくあなたが考えるかもしれない理由ではありません。これは、セレクタが右から左に適用されていることから完全に得られます。 –

これは、ほとんどの場合に起こる、より詳細な答えをheres ... http://stackoverflow.com/questions/5797014/css-selectors-parsed-right-to-left-why –

.popupbuttonが最も高速です。
a.popupbuttonは.popupbuttonと同じではありません。彼らはほとんどの場合同じようなことをしますが、この例外を考慮してください：

a:link { color: red; } 
.popupbutton { color: green; } /* Won't work */ 
a.popupbutton { color: green; } /* Will work */

2012-02-09 19:29:00 elclanrs

答えて