브라우저의 CSS 선택자(Selector) 해석 방법과 성능 향상
CSS Selector는 브라우저가 웹 페이지를 렌더링하는 방식에 영향을 줍니다. 페이지가 변경될 때마다 새로운 Dom Tree를 읽고 그에 맞는 스타일 규칙을 다시 대응시키는데, 이것을 “스타일 재계산” 이라고 합니다. 브라우저가 스타일 재계산하는 시간을 줄여 렌더링을 좀 더 수월하게 할 수 있도록 좋은 셀렉터 작성하는 방법을 정리해보았습니다.
CSS 선택자 (Selector)
CSS에서의 선택자는 표현 그대로 선택을 해주는 요소입니다. 이것을 통해 html의 특정한 요소를 선택하고 원하는 스타일을 적용할 수 있게 됩니다.
CSS Rule Set
“스타일 규칙” 이라고도하는데 Rule Set 들이 모인 집합을 스타일시트(Style Sheet)라고 하며 선택자를 통해 html의 요소를 선택하여 어떻게 렌더링할 것인지를 브라우저에게 알리는 역할을 합니다.
CSS rule set 을 보면 앞에 있는 h1 이 선택자입니다. 선택자로 원하는 요소를 선택을 할 수 있는데 태그 선택자, 클래스 선택자 등 다양한 선택자가 있습니다.
브라우저의 CSS 선택자
그렇다면 브라우저는 어떻게 선택자를 해석하고 html 요소를 찾아낼 수 있을까요? 브라우저가 CSS 선택자를 해석하는 방식은 사람이 CSS를 작성하는 방식과는 반대입니다. html 태그 최상단을 기준으로 왼쪽에서 오른쪽으로 작성하는 방면 브라우저는 오른쪽에서 왼쪽으로 CSS 선택자를 해석 합니다.
.wrapper .title h1{}
예를들어, 상단에 있는 스타일을 브라우저가 만났다고 합시다. 브라우저는 가장 먼저 h1 태그를 찾습니다. 그다음 title라는 클래스를 가지고 있는 요소, 그다음 wrapper 클래스를 가지고 있는 요소를 찾아 .wrapper .title h1 셀렉터를 일치시키는 것입니다.
이를 보고 우리는 컴퓨터가 .wrapper .title h1 셀렉터보다는 h1셀렉터를 찾는 데 더 빠르게 원하는 요소를 찾을 것이라고 생각할 수 있습니다.
하지만 더 나은 성능과 규칙 준수를 위해 셀렉터를 변경하는 것은 실질적인 이득 없이 CSS를 읽고 유지하기 어렵게 만들 수 있다고 합니다. 브라우저의 방법을 알고 항상 생각하면서 쉽게 읽을 수 있고 유지보수가 좋은 방식을 선택해서 코드를 작성해야합니다.
좋은 CSS 선택자 사용하기
선택자를 매칭 시키는 속도는 빠르기 때문에 노력을 많이 가할 필요는 없습니다. 특히 선택자에만 신경을 써서 유지보수가 더 나빠지거나 코드의 가독성이 떨어진다면 안타까운 일입니다. 그래도 더 좋은 선택자를 항상 고민하고 있다면 깊은 고민 없이 코드를 작성할 수 있을 거라고 생각하기 때문에 마지막으로 정리를 해보았습니다.
- 구체적이고 간결하게, 많은 계층을 건너뛰지 않고 명시적인 선택자를 사용하기
- 전체 선택자(*)나 태그 선택자(‘div’, ‘span’ 등) 보다는 클래스 선택자, ID 선택자와 같은 지역 범위의 선택자를 사용
- 클래스 선택자를 조합하여 특정 요소를 좀 더 정확하게 구체적인 선택자 만들기
- 요소와 선택자 사이에 가장 가까운 공통 조상을 사용하여 선택자의 범위를 좁히기
제가 참고한 microsoft 블로그의 글을 보면 더욱 깊게 선택자 성능에 대해 고민하고 연구한 결과가 있습니다. 글을 한번씩 읽어보시는 것을 추천드립니다.
참고