メモ。
div {
width: 22% \9; /* IE6 IE7 IE8 */
*width: 22% /* IE6 IE7 */
_width: 22% /* IE6 */
}
div:not(:target) {
width: 22% \9; /* IE9 */
}
bootstrapをいじってた時にこういった記述がちらほら目に入ったので調べてみた。
IE9のみのハックは要素の擬似クラスに「:not(:target)」を指定してやるのがポイント。
まずは結論。上から順に高速。
$('#hoge'); // IDセレクタ
$('div'); // タグセレクタ
$('.hoge'); // クラスセレクタ
$('#hoge').find('.hoge'); // IDセレクタ + find()、クラスセレクタ
$('.hoge', '#hoge'); // クラスセレクタとIDセレクタ
$('#hoge').find('div.hoge'); // IDセレクタ + find()、タグ、クラスセレクタ
$('#hoge .hoge'); // ID、クラスセレクタ
$('[name="hoge"]'); // 属性セレクタ
$(':hidden'); // jQuery独自セレクタ
ベンチマークスコアで表すと以下のようになる。テスト環境は次の通り。
Testing in Chrome 28.0.1500.95 32-bit on Windows Server 2008 R2 / 7 64-bit
※スコアが高いほど高速
$('#hoge'); // 1,342,595
$('div'); // 312,672
$('.hoge'); // 256,658
$('#hoge').find('.hoge'); // 175,491
$('.hoge', '#hoge'); // 158,029
$('#hoge').find('div.hoge'); // 77,628
$('#hoge .hoge'); // 26,625
$('[name="hoge"]'); // 23,506
$(':hidden'); // 1,274
こうしてみるとIDセレクタが圧倒的なパフォーマンスを誇っており、jQuery独自セレクタが圧倒的に遅い。
タグとクラスセレクタもなかなかに高速であると判明したが、結果からすると極力IDセレクタを用いた方が幸せになれそうである。
jQuery独自セレクタに関しては、わざわざ用いる場面に遭遇したことが無いのであまりピンと来ないが、実装を強いられない限り他のアプローチでどうにか解決するべきなのは間違いない。だって遅すぎるし（笑）。
更なる詳細は以下URLを参照。色々なパターンのベンチマークを見ることが出来る。
http://jsperf.com/id-vs-class-vs-tag-selectors