Css 선택자. 어떤 걸 써야 더 성능이 좋을까?

많은 사람들이 CSS가 성능이 높고 성능이 떨어질 수 있다는 사실을 잊거나 단순히 깨닫지 못합니다. 그러나 성능이 좋지 않은 CSS를 얼마나 적게, 실수하고, 실현할 수 있는지 알면 쉽게 용서받을 수 있습니다.

 

이 규칙은 실제로 속도가 특징 인 고성능 웹 사이트에만 적용되며 특정 페이지에 1000 개의 DOM 요소가 나타날 수 있습니다. 그러나 모범 사례는 모범 사례이며, 다음 Facebook 또는 로컬 데코레이터를위한 사이트를 구축하든 상관없이 항상 알아 두는 것이 좋습니다.

 

Steve Souders 의 책 Even Faster Websites에서 인용하는 css 선택자 스피드의 순위는 다음과 같습니다.

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

The difference in speed between an ID and a class is almost totally irrelevant.

하지만 ID와 Class 간의 속도 차이는 거의 없다고 보면 됩니다.

 

클래스 나 ID가 아닌 유형을 선택하면 리플 로우가 훨씬 느려집니다.

 

그리고 css로 직접 태그 선택자를 잡는 것보다 클래스를 부여하는 편이 훨씬 더 성능이 좋습니다.

 

// 좋지 않은 예
#social a {}
// 좋은 예
#social .social-link {}

왜냐하면 훨씬 더 적은 순서의 특별함을 가지고 있어 브라우저는 빠르게 탐색하고 넘어갈 수 있습니다.

 

가장 잘못된 예

div:nth-of-type(3) ul:last-child li:nth-of-type(odd) * { font-weight:bold }

 

클래스 선택자를 적극 활용합시다.

 

 

출처 : https://csswizardry.com/2011/09/writing-efficient-css-selectors/