パフォーマンス観点でのCSSセレクタ指定方法

CSSのセレクタ指定方法はたくさんあるが、パフォーマンス観点ではどのような違いがあるのか、気になったので調査結果をメモ

#調査結果
##参考サイト1
回答より抜粋

| セレクタ指定方法 | Firefox 15.0 | Chrome 19.0.1084.1 | Internet Explorer 8 |
|:-----------------------------|------------------:|---------------------:|---------------------:|
|class selectors (.classname)| 35ms| 100ms| 35ms|
|class selectors, more specific (div.classname)| 36ms| 110ms| 37ms|
|class selectors, even more specific (div div.classname)| 40ms| 115ms| 40ms|
|id selectors (#id)| 35ms| 99ms| 35ms|
|id selectors, more specific (div#id)| 35ms| 105ms| 38ms|
|id selectors, even more specific (div div#id)| 40ms| 110ms| 39ms|
|class selectors, with attribute (.class[title="ttl"])| 45ms| 400ms| 2000ms|
|class selectors, more complex attribute (.class[title~="ttl"])| 45ms| 1050ms| 2200ms|

古い情報だが、classセレクタ・idセレクタ・要素型セレクタは問題なさそう
属性セレクタを指定した場合は、極端にレンダリング速度が遅くなることが判明(極力使わないほうが良さそう)
※個人的にFirefoxがあまり影響を受けないことが興味深い(気になる人は試してみたほうが良いと思う)

##参考サイト2
回答より抜粋
レンダリング速度が速い順に記載

1. ID, e.g. #header

1. Class, e.g. .promo
2. Type, e.g. div
3. Adjacent sibling, e.g. h2 + p
4. Child, e.g. li > ul
5. Descendant, e.g. ul a*
6. Universal, *i.e. **
7. Attribute, e.g. [type="text"]
8. Pseudo-classes/-elements, e.g. a:hover

やはり、classセレクタ・idセレクタ・要素型セレクタがトップを占める

##参考サイト3
使用を控えたほうが良いプロパティを抜粋

• border-radius

• box-shadow
• transform
• filter
• :nth-child
• position: fixed;

使用するべきでないプロパティを抜粋

• [disabled]
• [type=“text”]

#結論

• なるべく、classセレクタ・idセレクタ・要素型セレクタで指定する
• 全称セレクタ・属性セレクタはコストが高いため、使用しない
• 子セレクタ・子孫セレクタは使用を控える(使用する場合はネストの深さやキーセレクタに気をつける)

※ネストの深さやキーセレクタが与えるパフォーマンスについてはブラウザのCSS解釈方法についての衝撃事実を参照

#余談
CSSセレクタのパフォーマンス検証はCSS Test Creatorが便利らしい