브라우저가 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;
}