[CSS] 브라우저가 css 셀렉터를 해석하는 방법과 성능 향상 방법

브라우저가 css 셀렉터를 해석하는 방법

브라우저가 css 선택자를 해석하는 방식은 일반적으로 css를 작성하는 방식과는 반대다. 브라우저는 오른쪽에서 왼쪽으로 css 선택자를 해석 한다.

div p a { }

예를 들어, div p a 라는 선택자가 있다면, 브라우저는 먼저 모든 a 태그를 찾고, 그 중에서 부모 요소가 p 인 것을 찾고, 마지막으로 이 중에서 또 다시 부모 요소가 div인 것을 찾는다.

이러한 방식은 브라우저가 불필요한 요소를 검사하는 시간을 줄이는 데 도움이 된다. 왜냐하면 가장 일반적인 요소 (여기서는 a 태그)부터 검사를 시작하므로, 좀 더 빠르게 원하는 요소를 찾을 수 있기 때문이다.

css 선택자의 성능 향상 방법

선택자의 복잡성 줄이기

가능한 한 간단한 선택자를 사용하는 것이 좋다. 복잡한 선택자는 브라우저가 더 많은 요소를 검사해야 하므로 성능에 영향을 줄 수 있다.

/* 복잡한 선택자 */
body div.header ul.nav li a.active {
  color: red;
}

/* 간단한 선택자 */
.active {
  color: red;
}

ID 선택자 활용하기

ID는 고유한 값을 식별할 수 있고 ID 선택자를 활용하면 빠르게 해당 요소를 찾을 수 있다.

#main-content {
 padding: 20px;
}

클래스 선택자 사용하기

태그 보다는 클래스 선택자를 조합하여 특정 요소를 좀 더 정확하게 선택하는 방법을 통해 해당 요소를 찾을 수 있다.

.main > .content > .text {
  padding: 20px;
}

하위 요소 대신 자식 요소 선택자 사용하기

하위 요소 선택자는 지정된 요소와 그 하위의 모든 요소를 검사하지만, 자식 요소 선택자 > 는 바로 아래 한 단계의 요소만 검사한다.
가능한 한 자식 요소 선택자를 사용하는 것이 성능을 향상시킬 수 있다.

/* 하위 요소 선택자 */
div span {
  color: blue;
}

/* 자식 요소 선택자 */
div > span {
  color: blue;
}

태그 선택자 피하기

태그 선택자는 해당 태그의 모든 요소를 검사하므로, 성능에 영향을 줄 수 있다. 따라서, 필요한 경우가 아니라면 태그 선택자는 피하는 것이 좋다.

/* 태그 선택자 사용 */
p {
  margin-bottom: 20px;
}

/* 클래스 선택자로 변경 */
.paragraph {
  margin-bottom: 20px;
}

---

참고

• 브라우저가 css 셀렉터를 해석하는 방법과 성능 향상 방법