Css selector 성능

일단 결론부터 공개한다.

Steve Souders 의 책 Even Faster Websites에서 소개한 내용이라고한다.

 

1. ID (#id)

2.Class (.class)

3. Tag (div)

4. Adjacent sibling (h1 + p)

5. Child (div > p)

6. Descendant (div p)

7. Universal (*)

8. Attribute ([type='text'])

9. Pseudo-classes/-elements (:hover)

 

순서는 저렇게 나와 있지만, id, class간의 속도 차이는 거의 없다고 한다.

 

일단 CSS selector는 오른쪽부터 왼쪽으로 읽어가면서 동작한다.

ul > li > a {...} 라는 css가 작성된다면,

브라우저는 a태그를 먼저 찾고, li를 부모로 갖는지 확인하고, 그것이 ul요소를 부모로 갖는지 검사한다.

 

1,2,3과 4,5,6,7은 선택자의 개수 차이로 성능차이가 날 수 있는 것은 알겠는데, 8,9가 7보다 느린것은 의문이다.