Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

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
  2. Class, e.g. .promo
  3. Type, e.g. div
  4. Adjacent sibling, e.g. h2 + p
  5. Child, e.g. li > ul
  6. Descendant, e.g. ul a*
  7. Universal, i.e. *
  8. Attribute, e.g. [type="text"]
  9. 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が便利らしい

rnakayama
Web開発をしています
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした