CSS 요소 선택기의 작동 방식 소개

추천 튜토리얼: CSS 비디오 튜토리얼

프론트엔드 엔지니어의 일상 작업에서는 일반 CSS나 SASS, SCSS 또는 컴파일해야 하는 LESS 등을 작성하는 경우 CSS 요소 선택기를 사용하는 것이 일반적입니다. ., 결국 한 줄씩 CSS 스타일 속성으로 컴파일되고 마지막으로 브라우저에 전달되어 구문 분석 및 적용됩니다. 하지만 이것이 없었다면 어떻게 가능할지 생각해 본 적이 있나요?

브라우저 렌더링

먼저 브라우저 렌더링 단계를 살펴보겠습니다.

CSS가 브라우저에 의해 로드된 후 CSSOM 트리로 구문 분석되고 Dom과 겹쳐서 형성됩니다. 렌더링 트리를 만든 다음 위치, 렌더링 및 기타 단계를 계산합니다. 이러한 관점에서 CSS 속성을 적용하는 핵심은 CSS를 CSSOM 트리로 변환하는 방법과 CSSOM을 DOM에 적용하는 방법에 있습니다.

CSSOM 트리

CSS 스타일 세트를 기록할 때, 예를 들어:

#id .class h4 + p {
   ...
}

브라우저가 이를 구문 분석하면 CSS가 왼쪽에서 오른쪽으로 /code> #id<code>.class>h4>p는 마지막에 적용되지만 실제로브라우저가 CSS를 구문 분석하는 순서는 다음과 같습니다. 오른쪽에서 왼쪽으로p>h4>.class>#id . ＃id>.class>h4>p，最后套用，但实际上浏览器解析 CSS 的顺序是由右到左的 p>h4>.class>＃id。

很违背直觉对吧？但如果考虑到性能问题，从右到左的解析会比从左到右强很多。

假设这有这样的 HTML：

<p>
    </p><p>
        </p><p>
            ...
        </p>
        <p>
            </p><p>
                ...
            </p>
            <p>
                ...
            </p>
        
    
    <p>
        </p><p>
            </p><p>
                ...
            </p>
        
    

以及这边五条 CSS 样式规则：

#p1 .c .d {}
.f .c .d {}
.a .c .e {}
#p1 .f {}
.c .d {}

让我们模拟一下，如果把 CSS 从左到右解析，将会生成类似这样的 CSSOM 树：

通过 <p class="“" d></p> 中的 .d 来思考，这样的 CSSOM 树在套用样式时，必须对所有的样式规则进行检查，以确认样式规则是否会影响到 .d，到最后才能确定可能会影响到 .d 的样式规则有这三条：

• ＃p1 .c .d
• .f .c .d
• .c .d

以此类推，每个 DOM 树上的元素，都必须便利所有的样式规则，才可以取得个别的样式，这样会造成大量冗余的计算，进而严重影响性能。

反过来，如果将前面的 CSS 由右到左进行解析，CSSOM 树则可能会如下：

和前面的例子一样，从 <p class="“" d></p> 中 .d 的角度来看，由于会被样式规则影响到的目标元素，已经全都集中在第一层了，所以就不用再去便利整个 CSSOM 树了，甚至只需要检查 .d 以下的子属性变量是否符合实际 DOM 结构，再将所有符合的样式规则重新取回，便能完成 .d

rrreee

rrreee

• #p1 .c .d
• .f .c .d
• .c .d

• 이전 예와 동일, <p class="d"></p> >.d, 스타일 규칙의 영향을 받을 대상 요소가 모두 첫 번째 레이어에 집중되어 있으므로 전체 CSSOM 트리를 용이하게 할 필요가 없거나 .d만 확인하면 됩니다. 다음 하위 속성 변수는 실제 DOM 구조를 준수한 다음 일치하는 모든 스타일 규칙을 검색하여 .d의 스타일 규칙을 요소에 적용하는 것을 완료합니다.
• 오른쪽에서 왼쪽으로 구문 분석 순서를 사용하면 모든 공유 규칙 경로를 함께 모을 수 있습니다. 브라우저가 속성 비교를 수행할 때 더 이상 전체 CSSOM 트리를 용이하게 할 필요가 없으므로 잘못된 비교 계산이 크게 줄어듭니다.
• 다른 방식으로 생각해 볼 수도 있습니다. HTML 구조에서 요소는 수많은 하위 요소를 가질 수 있지만 하위 요소에서 상위 요소까지(아래에서 위로) 검색하는 것은 확실히 하나의 상위 요소만 가질 수 있습니다. 더 빠르게.
• 스타일 적용

HTML의 인라인 스타일 설정

• 브라우저 기본값
• 브라우저 사용자 기본 설정
• 개발자 정의 CSS
• 인라인 스타일
• plus !중요 스타일 속성

인라인 스타일과 개발자 정의 CSS가 별도로 처리되는 이유는 무엇입니까?

브라우저 렌더링 단계를 검토할 수 있습니다. 인라인 스타일은 DOM 요소에 존재하므로 CSS를 DOM에 적용한 경우에만 액세스할 수 있으며 두 가지를 미리 결합할 수는 없습니다.

CSS 효율성

실제로 브라우저는 여기에서 최적화 메커니즘을 완성했습니다. 브라우저는 자동으로 일관된 상태의 요소 스타일 스냅샷을 찍습니다. 일관된 상태는 다음 조건이 충족되어야 함을 의미합니다.

• ID가 설정되지 않았습니다.
• 태그와 클래스가 정확히 동일해야 합니다.
• 스타일 속성이 설정되지 않았습니다.
• 다양한 형제 선택자를 스타일 규칙에 사용할 수 없습니다(예: : 〜，+，:first-child etc. )

위 조건과 앞에서 설명한 CSS 작업 프로세스로 인해 CSS 작성 시 주의할 점이 몇 가지 있습니다.

• 스타일 규칙의 대상 속성이 그룹으로 저장되므로, id 선택자는 매우 효율적이므로 다른 조건과 혼합할 수 없습니다.
• CSS 스타일 규칙을 너무 깊게 작성하지 마세요
• 인라인 스타일을 사용할 수 없다면 사용하지 마세요. 유지 관리도 어렵고 DOM 트리에 존재하기 때문에 다른 스타일과 결합할 수 없습니다. 스타일을 미리 만들어 놓으면 효율성이 크게 떨어집니다

이러한 일반적인 작은 세부 사항에 주의를 기울인다면 CSS 효율성은 자연스럽게 크게 향상될 수 있습니다.

Extension

CSS 선택기에 대해 알고 나면 확실히 궁금할 것입니다. JavaScript 요소 선택기는 어떻습니까? 이 질문은 jQuery의 소스 코드를 참조하면 됩니다. 왼쪽에서 오른쪽으로 파싱되어 있는데, 왜 다른지는 기사에 나와 있으니 생각해보고 파헤쳐 보세요.

더 많은 프로그래밍 관련 지식을 보려면 프로그래밍 소개를 방문하세요! !

위 내용은 CSS 요소 선택기의 작동 방식 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!