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
回答より抜粋
レンダリング速度が速い順に記載
- ID, e.g. #header
- Class, e.g. .promo
- Type, e.g. div
- Adjacent sibling, e.g. h2 + p
- Child, e.g. li > ul
- Descendant, e.g. ul a*
- Universal, i.e. *
- Attribute, e.g. [type="text"]
- 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が便利らしい