CSS 요소 선택기의 작동 방식 소개-CSS 튜토리얼-php.cn

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

프론트엔드 엔지니어의 일상 작업에서는 일반 CSS나 SASS, SCSS 또는 컴파일해야 하는 LESS 등을 작성하는 경우 CSS 요소 선택기를 사용하는 것이 일반적입니다. ., 결국 한 줄씩 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 树：

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

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

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

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

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

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

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

매우 직관에 어긋나죠? 그러나 성능 문제를 고려하면 오른쪽에서 왼쪽으로 구문 분석하는 것이 왼쪽에서 오른쪽으로 구문 분석하는 것보다 훨씬 강력합니다.

다음과 같은 HTML이 있다고 가정해 보세요.

rrreee

다음은 다섯 가지 CSS 스타일 규칙입니다.

rrreee

CSS를 왼쪽에서 오른쪽으로 구문 분석하면 다음과 유사한 CSSOM 트리가 생성됩니다.

< ;p class="d"> .d에 대한 생각 스타일 규칙이 .d에 영향을 미치는지 확인하십시오. .d에 영향을 미칠 수 있는 세 가지 스타일 규칙이 있음을 확인했습니다.

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

그리고 각 DOM 트리에서 모든 요소는 개별 스타일을 얻기 전에 모든 스타일 규칙을 촉진해야 합니다. 이로 인해 많은 중복 계산이 발생하고 심각한 영향을 미칩니다. 성능.

반대로 이전 CSS를 오른쪽에서 왼쪽으로 구문 분석하면 CSSOM 트리는 다음과 같을 수 있습니다.

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

CSSOM 트리를 파싱한 후 DOM과 결합할 수 있나요? 정말 그렇게 간단하다면 정말 좋을 것 같아요.

개발자가 정의한 CSS 파일 외에도 화면 렌더링에 영향을 주기 위해 스타일 규칙을 정의할 수 있는 여러 위치가 있습니다.

HTML의 인라인 스타일 설정

🎜브라우저 기본값 (즉, CSS 재설정 /normalize 요구 사항 덮어쓰기)🎜🎜브라우저 사용자 환경 설정🎜🎜🎜브라우저는 CSS 부분을 처리하는 역할을 담당하며, 이전의 모든 항목과 CSS 파일에서 정의한 스타일 규칙을 별도의 스타일 규칙 그룹(CSS 규칙 세트)으로 구성합니다. , 콘텐츠에는 스타일 규칙, 대상 속성 등과 같은 정보가 기록됩니다. 🎜🎜대상 속성🎜🎜 후속 계산 효율성을 높이기 위해 브라우저의 CSS 처리 커널은 대상 속성에 따라 스타일 규칙 그룹에 개별 규칙을 그룹화하고 저장하며 총 4개의 그룹으로 나뉩니다🎜🎜🎜idRules. 🎜🎜classRules🎜🎜 tagNameRules🎜🎜universalRules🎜🎜🎜 이렇게 접근 시 대상 요소에 이 속성이 있는지 여부에 따라 적용될 수 있는 스타일을 빠르게 필터링할 수 있습니다. 🎜🎜규칙 적용🎜🎜마지막 단계는 규칙을 적용하는 것입니다. 브라우저는 다음 순서와 스타일 규칙 가중치에 따라 모든 스타일 규칙을 적용합니다. 🎜

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

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

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

CSS 효율성

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

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

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

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

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