CSS 선택기 엔진은 오른쪽에서 왼쪽으로 읽는 것을 선호합니까?

CSS 선택기 엔진: 오른쪽에서 왼쪽으로 읽기

CSS 세계에서는 .name과 같은 선택기가 일반적으로 가정되어 왔습니다. div.name보다 빠르게 수행됩니다. 그러나 최근 일부 연구 결과에서는 이와 달리 주장하며 대부분의 선택기 엔진이 오른쪽에서 왼쪽으로 읽는다는 사실을 시사합니다. 이는 성능에 미치는 영향과 이 접근 방식의 이유에 대한 의문을 제기합니다.

오른쪽에서 왼쪽으로 평가

.name이 더 빠르다는 가정이 사실일 수도 있습니다. 결함이 있을 경우 전체 성능은 브라우저 구현 및 특정 문서 구조에 따라 크게 달라집니다. 그럼에도 불구하고 대부분의 최신 CSS 선택기 엔진은 오른쪽에서 왼쪽으로 평가하는 방식을 따릅니다.

Gecko 개발자인 Boris Zbarsky에 따르면 브라우저는 일반적으로 요소를 선택하고 모든 후보 선택기를 평가하여 일치하는지 확인하는 방식으로 작동합니다. , 주어진 선택기에 대해 일치하는 요소를 식별하는 대신. 이 오른쪽에서 왼쪽 접근 방식은 >와 같은 연결자를 가로지르는 프로세스를 단순화합니다. 또는 , 선택기 내에서.

간단한 선택기 내 순회

그러나 오른쪽에서 왼쪽으로 평가가 내부의 단순 선택기 수준까지 확장되지 않는다는 점을 구별하는 것이 중요합니다. 각 화합물 선택기. 예를 들어 복잡한 선택기 div.name[data-foo="bar"]:nth-child(5):hover::after에서 브라우저는 hover, child count, data 순서로 조건을 반드시 확인하지 않을 수도 있습니다. 속성, 이름 클래스 및 유형.

대신 성능상의 이유로 ID와 같은 특정 단순 선택기가 우선순위를 가질 수 있습니다. 이는 일치 프로세스를 최적화하기 위해 ID가 있는 규칙을 먼저 확인하는 Gecko의 구현에서 분명합니다.

요약

CSS 선택기 엔진 읽기 방향은 일반적으로 옳습니다. 왼쪽에서 왼쪽으로, 그러나 이것이 어떻게 구현되는지에 대한 구체적인 세부 사항은 브라우저마다 다를 수 있습니다. 또한 오른쪽에서 왼쪽 평가는 개별 단순 선택기 수준이 아닌 복합 선택기 내의 조합기에만 적용됩니다.

위 내용은 CSS 선택기 엔진은 오른쪽에서 왼쪽으로 읽는 것을 선호합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!