class와 id 선택자를 중심으로 살펴보는 효율적인 렌더링을 위한 CSS 활용

class와 id 선택자를 중심으로 살펴보는 효율적인 렌더링을 위한 CSS 활용

참고: https://csswizardry.com/2011/09/writing-efficient-css-selectors/

선택자에 따라 CSS 의 성능 차이가 궁금해서 찾아봤다.

정리

1. 되도록이면 class를 사용하자

선택자에 따른 reflow 속도가 가장 빠른 건 id이지만 class와 별반 차이가 없다.

심지어 윈도우 환경에서 파이어폭스 6 브라우져에서는 class가 더 빨랐다.

또 id는 class보다 우선순위 점수가 월등히 높아서 id와 class를 혼용해서 사용 시 사이드 이펙트가 발생할 여지가 있다.

id는 js에서만 이용하고 스타일에서는 class만 사용하자.

2. 되도록 적은 수의 선택자를 사용하자

#temp .foo .target {

}

보다

.target {

}

이 더 빠르다.

3. 맨 오른쪽에 있는 선택자의 속도로 렌더링된다.

#id div {

}

위 코드는 아이디를 사용했지만 가장 마지막에 있는 선택자가 tag이므로 tag의 reflow 속도를 따르게 된다.

따라서 맨 오른쪽에 오는 선택자를 가장 성능이 좋은 것, 즉 class를 사용하도록 하자

정리

되도록 적은 수의 선택자를 사용하며 맨 오른쪽에 class가 오도록 작성한다. id는 js에 양보하자.

후기

아티클 내용이 생각보다 너무 좋았다. 추후에 번역을 해봐야겠다.