본문 바로가기
CSS

CSS 전체 선택자 *는 정말 성능이 안좋을까?

by Vintz 2022. 4. 24.
반응형

내 생각에서 나온건지, 어느 글에서 본건지 정확히 기억은 안나지만 'CSS *(asterisk)는 성능에 영향을 끼친다'라는 생각이 자리잡게 되었다. 그래서 쓸 때마다 찝찝한 기분을 지울 수 없어서 제대로 알아보기로 했다.

전체 선택자(Universal Selector)란?

CSS *(asterisk)

CSS의 전체 선택자는 말 그대로 모든 요소를 선택해서 모든 요소에 스타일 속성을 적용 한다는 것을 뜻한다. 범용적으로 자주 쓰이는 속성이라면 좋은 선택지일 수 있다. 하지만 불필요한 요소에도 속성이 적용되는 것이 성능에는 안좋지 않을까? 다음과 같이 간단하게 테스트를 해보자.

  • 3,000개의 요소(div > p > span 1,000개)
  • 모든 요소에 속성 적용
  • no css와 비교

Chrome

chrome no css(왼쪽)과 전체 선택자 사용(오른쪽)

먼저 chrome의 테스트를 보자. 전체 선택자 속성의 경우 가장 일반적으로 설정하는 속성과 'fade' 효과를 자주 사용한다는 페이지라 생각하고 다음과 같이 설정을 했다.

*,
*::before,
*::after {
  box-sizing: border-box;
  transition: opacity 1s linear;
}

따라서, 모든 3,000개의 요소에 위의 스타일을 적용한 것이다. 그런데도 위 이미지처럼 여러번의 테스트를 해보아도 렌더링 시간에 의미 있는 영향을 미치지 않았다. 

Safari

safari no css(왼쪽)과 전체 선택자 사용(오른쪽)

safari 역시 결과는 비슷했다. 오히려 렌더링 시간이 줄어들기도 하는 것을 보면 그만큼 성능에 큰 영향을 미치지 않으며, 모던 브라우저는 최적화가 잘 되어 있는 것 같다.

Edge

edge no css(왼쪽)과 전체 선택자 사용(오른쪽)

edge라고 결과가 다를까? edge 역시 비슷한 결과를 보여줬다. 생각보다 전체 선택자를 사용함에 있어서 겁 먹을 필요는 없을 것 같다. 물론 웹사이트의 크기가 정말 크다면 성능에 영향을 미칠 수도 있다. 그럴 땐 좀 더 구체적으로 #element_id *와 같이 사용하는 것이 도움이 될 수 있다.

 

이렇게 상황에 따라 다르겠지만 일반적인 상황의 경우엔 전체 선택자를 사용하는 것이 그렇지 않은 것보다 훨씬 효율적이고 개발자의 시간을 줄여주는 일이라 생각한다. 하지만 전체 선택자로 인해 다른 요소들이 영향을 받을 수도 있고, 의도치 않은 결과가 나올 수도 있기 때문에 너무 많은 속성을 전체 선택자에 주는 것은 좋지 않다.

여담으로 IE6 시대의 개발자들은 전체 선택자에 대한 두려움을 갖고 있다고 한다. IE6에서 전체 선택자가 고통의 원인이었기 때문이다.

마음 편히 사용하자

전체 선택자 사용에 대해 확신을 갖게 되었다. 모던 브라우저에선 무시할 정도의 수치였으며, 크게 걱정할 필요도 없는 것이었다. 이제는 전체 선택자 사용 자체에 대한 고민이 아닌 어떻게 더 효율적으로 사용할 수 있는지에 대해 고민을 할 수 있게 되었다.

참고

What is the performance impact of the universal selector? - stackoverflow
CSS Tip: Star Selector Not That Bad - toddanglin
반응형