브라우저가 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 선택자를 활용하여 빠르게 해당 요소를 찾을 수 있다.

/* 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;
}

---