브라우저가 CSS를 해석하는 방법에 대한 놀라운 사실
잘못된 생각
.sample table td {
color: red;
}
위의 코드를 볼 때 브라우저는 abd를 해석하여 다음 순서로 실행합니다.
이 순서가 잘못된 것 같다고 생각되지 않으면 계속 읽어야 합니다.
올바른 생각
.sample table td {
color: red;
}
위의 코드를 보면 브라우저는 다음과 같은 순서로 해석하고 실행합니다.
CSS 선택자는 위의 순서와 같이 오른쪽에서 왼쪽으로 정렬됩니다.
맨 오른쪽 선택기를 "키 선택기"라고 합니다.
즉, 키 선택기에 대해 적용 범위가 넓은 선택기를 지정하면 일치하는 데 시간이 오래 걸릴 수 있습니다.
뭐가 문제 야
아래 코드를 작성했다고 가정해 보겠습니다.
먼저 DOM에서 모든 td 요소를 찾은 다음 테이블 요소와 샘플 클래스의 존재를 확인하려고 시도합니다.
sample2 클래스 아래에 있는 테이블의 텍스트 색상은 검은색으로 유지되므로 sample2 클래스 아래에서 td 요소를 찾을 필요가 없습니다.
이것은 명백한 비용 낭비입니다.
sample2 클래스 아래에 있는 td 요소의 수가 증가하면 성능 문제가 발생할 수 있습니다.
<html>
<body>
<div class="sample">
<table>
<tr>
<td>Red</td>
<td>red</td>
</tr>
<tr>
<td>Red</td>
<td>red</td>
</tr>
</table>
</div>
<div class="sample2">
<table>
<tr>
<td>Black</td>
<td>black</td>
</tr>
<tr>
<td>Balck</td>
<td>black</td>
</tr>
</table>
</div>
</body>
<html>
<style>
.sample table td {
color: red;
}
</style>
따라서 이 경우 아래와 같이 텍스트 색상을 빨간색으로 지정하려는 셀에만 빨간색 클래스를 주는 것이 좋습니다.
<html>
<body>
<div class="sample">
<table>
<tr>
<td class="red">Red</td>
<td class="red">red</td>
</tr>
<tr>
<td class="red">Red</td>
<td class="red">red</td>
</tr>
</table>
</div>
<div class="sample2">
<table>
<tr>
<td>Black</td>
<td>black</td>
</tr>
<tr>
<td>Black</td>
<td>black</td>
</tr>
</table>
</div>
</body>
<html>
<style>
.red {
color: red;
}
</style>
Reference
이 문제에 관하여(브라우저가 CSS를 해석하는 방법에 대한 놀라운 사실), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/duck_programmer/surprising-facts-about-how-browsers-interpret-css-54nf텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
