CSS가 포함 된 재산에 깊은 다이빙을하자

최신 브라우저는 복잡한 HTML, CSS 및 JavaScript 코드를 웹 페이지의 코드를 몇 밀리 초 안에 사용 가능한 페이지로 변환하는 데 훨씬 더 효율적입니다.

그렇다면 프론트 엔드 개발자는 어떻게 브라우저 렌더링 속도를 더욱 향상시킬 수 있습니까? CSS 선택기를 간소화하고 HTML 구조를 평평하게 유지하고 JavaScript에서 HTML 및 CSS를 조작하는 데주의를 기울이는 등 쉽게 잊혀진 모범 사례 (특히 생성 코드에 대한 제어가 제한된 경우) 외에도 CSS의 contain 을 이용할 수 있습니다.

contain 속성을 사용하면 개발자가 요소와 해당 내용의 나머지 문서 트리와 독립적 인 내용을 어느 정도까지 지정할 수 있습니다. 이를 통해 브라우저는 레이아웃, 스타일, 도면, 크기 또는 DOM의 제한된 영역 (전체 페이지가 아닌)에 대해서만 조합을 다시 계산할 수 있으므로 성능이 크게 향상됩니다.

간단히 말해서, contain 속성은 브라우저가 페이지의 요소 간의 관계에 대한 프롬프트를 제공 할 수 있으며, 이는 컨텐츠가 동적이더라도 컨텐츠를 포함하는 컨테이너 요소 인 페이지의 요소입니다. 예를 들어, 단일 페이지 응용 프로그램 (SPA)에서 동적 콘텐츠는 종종 페이지에 종종 페이지에 다른 콘텐츠와 무관하게 삽입되고 삭제됩니다.

브라우저는 JavaScript 삽입 및 페이지 컨텐츠 삭제로 인해 발생할 수있는 향후 레이아웃 변경을 예측할 수 없습니다. 요소에 클래스 이름을 추가하거나 애니메이션 DOM 요소를 추가하거나 요소 크기를 얻는 것과 같은 간단한 작업조차도 페이지 재 배열 및 리 그리기로 이어질 수 있으며, 이는 비싸고 가능한 한 피하거나 감소시켜야합니다.

개발자는 페이지 디자인의 사용자 경험에 따라 가능한 미래 변경을 예측할 수 있습니다. 예를 들어, 사용자가 버튼을 클릭하면 현재보기에서 호출 데이터가 DIV 요소에 삽입됩니다. 우리는 이것이 가능하다는 것을 알고 있지만 브라우저는 그렇지 않습니다. 또한 DIV 요소에 데이터를 삽입하면 페이지의 다른 요소의 시각적 효과 또는 다른 측면이 변경되지 않을 가능성이 높습니다.

브라우저 개발자는 이러한 상황을 처리하기 위해 브라우저를 최적화하는 데 많은 시간을 보냈습니다. 브라우저 가이 상황을보다 효율적으로 처리하는 데 도움이되는 다양한 방법이 있지만보다 직접적인 팁이 더 도움이 될 수 있습니다. contain 속성은 이러한 힌트를 제공하는 방법을 제공합니다.

contain 속성의 다양한 사용법

contain 속성에는 세 가지 값이 있으며, 단독으로 또는 size , layout 및 paint 조합으로 사용할 수 있습니다. 또한 일반적인 조합에 대한 두 가지 약어 값이 있습니다 : strict 과 content . 각 가치가 무엇을 의미하는지 이해합시다.

각 값에 대한 많은 규칙과 모서리 사례가 사양에 포함됩니다. 대부분의 경우 이러한 규칙은별로 관심을 끌지 않을 수 있습니다. 그러나 예상치 못한 결과를 얻으면 사양을 빠르게 살펴보면 도움이 될 수 있습니다.

사양에 유형이 포함 된 스타일도 있으며,이 기사에는 소개되지 않습니다. 그 이유는 현재 스타일 포함 유형이 가치가 거의없는 것으로 간주되며 현재 사양에서 제거 될 위험이 있기 때문입니다.

size 포함되어 있습니다

size 포함은 설명하기 쉽습니다. 여기에 포함 된 컨테이너에 레이아웃 계산에 참여하는 경우 브라우저는 컨테이너의 하위 요소를 무시하기 때문에 계산의 상당 부분을 건너 뛸 수 있습니다. 컨테이너는 높이와 너비가 설정 될 것으로 예상됩니다. 그렇지 않으면 붕괴되며 페이지 레이아웃에서 고려해야 할 유일한 요소입니다. 아무것도없는 것으로 간주됩니다.

어린이 요소는 용기 스타일에 따라 용기의 크기에 영향을 줄 수 있습니다. 레이아웃을 계산할 때 고려해야합니다. size 포함을 사용하면 고려되지 않을 수 있습니다. 컨테이너가 페이지 크기에 비해 결정되면 하위 요소의 레이아웃이 계산됩니다.

size 포함 자체는 많은 최적화를 제공하지 않습니다. 일반적으로 다른 값과 함께 사용됩니다.

그러나 제공 할 수있는 이점 중 하나는 컨테이너 쿼리 유형과 같은 컨테이너 크기를 기반으로 컨테이너 하위 요소를 변경하는 JavaScript를 처리하는 데 도움이됩니다. 경우에 따라 컨테이너의 크기에 따라 하위 요소를 변경하면 컨테이너가 어린이 요소를 변경 한 후 크기를 변경할 수 있습니다. 컨테이너 크기의 변경으로 인해 하위 요소가 다른 변경을 유발할 수 있으므로 변경 루프로 끝날 수 있습니다. size 포함되어 있어이 루프를 방지 할 수 있습니다.

이 크기 size 루프 개념에 대한 완전히 인공적인 예는 다음과 같습니다.

layout 포함되어 있습니다

layout 외부 요소가 컨테이너 요소의 내부 레이아웃에 영향을 미치지 않음을 브라우저에 알려주는 레이아웃이 포함되어 있거나 컨테이너 요소의 내부 레이아웃이 외부 요소에 영향을 미치지 않습니다. 따라서 브라우저가 레이아웃 계산을 수행하면 layout 에 포함 된 다양한 요소가 다른 요소에 영향을 미치지 않는다고 가정 할 수 있습니다. 이렇게하면 수행 해야하는 계산량이 줄어 듭니다.

또 다른 이점은 컨테이너가 화면 외부 또는 차단되면 관련 계산이 우선 순위를 지연 시키거나 줄일 수 있다는 것입니다. 사양에서 제공하는 예는 다음과 같습니다.

[…] 예를 들어, 포함 상자가 블록 컨테이너의 끝 근처에 있고 블록 컨테이너의 시작 부분을보고있는 경우

layout 포함 된 컨테이너에는 절대 또는 고정 위치 하위 요소가 포함 된 블록이 포함됩니다. 이것은 상대적 위치를 컨테이너에 적용하는 것과 동일합니다. 따라서 이러한 유형의 포함을 적용 할 때 컨테이너의 어린이 요소에 영향을 미치는 방법을 기억하십시오.

마찬가지로, 컨테이너는 새로운 스택 컨텍스트를 가져 오므로 z-index 응용 프로그램이 상대적, 절대적이거나 고정 된 것과 같은 방식으로 사용됩니다. 그러나 top , right , bottom 또는 left 속성을 설정하면 컨테이너에 영향을 미치지 않습니다.

간단한 예 layout 다음과 같습니다.

paint 포함되어 있습니다

paint 에는 브라우저에 컨테이너의 하위 요소가 컨테이너 박스 크기의 경계 밖에서 그려지지 않을 것이라고 알려줍니다. 이것은 overflow: hidden; 컨테이너에 있지만 약간의 차이점이 있습니다.

첫째, 컨테이너는 layout 포함하에있는 것과 동일한 방식으로 처리됩니다. 자체 스태킹 컨텍스트가 포함 된 블록이 포함됩니다. 따라서 paint 에 위치한 자식 요소는 위치 측면에서 용기를 존중합니다. 위의 layout 복사하려면 데모가 포함되지만 사용 paint 포함 대신 결과는 거의 동일합니다. 차이점은 애플리케이션에 포함될 때 자주색 선이 컨테이너를 넘치지 않지만 컨테이너 경계에서 잘린다는 것입니다.

paint 포함 된 또 다른 흥미로운 이점은 브라우저가 컨테이너 자체가 뷰포트에서 보이지 않음을 감지 할 수 있다면 해당 요소의 하위 요소의 도면 계산을 건너 뛸 수 있다는 것입니다. 컨테이너가 뷰포트에 있지 않거나 어떤 식 으로든 방해받는 경우, 그 아이들은 보이지 않습니다. 예를 들어, 페이지 왼쪽의 화면에서 일반적으로 위치한 내비게이션 메뉴를 고려하여 버튼을 클릭 할 때 미끄러집니다. 메뉴가 일반적인 오프 스크린 상태에 있으면 브라우저는 단순히 내용물을 그려 보려고 노력합니다.

다양한 조합이 포함되어 있습니다

이 세 가지에는 브라우저에서 수행하는 렌더링 계산에 영향을 미치는 다양한 방법이 포함됩니다. size 콘텐츠가 변경 될 때이 컨테이너가 페이지에서 위치 오프셋을 유발하지 않아야한다고 브라우저에 알리는 것이 포함되어 있습니다. layout 에는 브라우저 에이 컨테이너의 자식 요소가 컨테이너 외부의 요소에서 레이아웃이 변경되지 않아야하며 그 반대도 마찬가지입니다. paint 에는 브라우저 에이 컨테이너의 내용이 컨테이너 크기 외부에서 절대 그려지지 않을 것이며 컨테이너가 차단되면 내용이 전혀 그려지지 않을 것이라고 알려줍니다.

각각은 다른 최적화를 제공하므로 일부 포함을 함께 결합하는 것이 합리적입니다. 사양은 실제로 이것을 허용합니다. 예를 들어, 우리는 layout 과 paint 다음과 같이 contain 속성의 값으로 사용할 수 있습니다.

 .el {
  포함 : 레이아웃 페인트;
}

이것은 매우 명백한 것이므로 사양은 실제로 두 가지 약어 값을 제공합니다.

content 값은 웹 프로젝트에서 가장 일반적으로 사용되는 값으로, 시간이 지남에 따라 콘텐츠 또는 사용자 활동을 변경하는 대형 여러 컨테이너와 같은 많은 동적 요소를 포함합니다.

strict 값은 크기를 변경하지 않는 크기가 정의 된 컨테이너 (콘텐츠가 변경 되더라도)에 유용합니다. 일단 제자리에 예상 크기를 유지합니다. 간단한 예는 제 3 자 외부 광고 컨텐츠를 포함하는 DIV이며, 그 차원은 업계에서 정의되며 페이지의 다른 DOM 요소와 관련이 없습니다.

성능 장점

이 기사 의이 부분은 설명하기가 어렵습니다. 문제는 성능 장점에 시각적 영향이 많지 않다는 것입니다. 대부분의 이점은 비하인드 스토리 최적화이며, 브라우저가 레이아웃이나 그리기가 변경 될 때해야 할 일을 결정하는 데 도움이됩니다.

contain 속성의 성능 장점을 보여주기 위해 간단한 예제를 만들었습니다.이 예제는 여러 자식 요소로 요소의 글꼴 크기를 변경했습니다. 이 변경은 일반적으로 릴레이를 트리거하여 페이지가 다시 그려지게합니다. 이 예제는 contain none , content 및 strict 값을 다룹니다. (코드 예제 및 성능 테스트 결과는 여기에 삽입해야합니다)

한 번 레이아웃은 두 번 그리십시오

내 설명을 참을성있게 들어주세요. 나는 그것이 의미가 있다고 약속합니다.

위의 데모를 다음 설명의 기초로 사용하겠습니다. 학습을 계속하려면 Demo 및 Open DevTools의 정식 버전을 방문하십시오. 성능 도구를 실행 한 후에는 "메인"타임 라인 대신 "프레임"의 세부 사항을 켜서 설명하려는 내용을 확인해야합니다.

DevTools가 해당 버전에서 더 잘 작동하기 때문에 실제로 "FullPage"버전에서 스크린 샷을 찍고 있습니다. 즉, "Full"의 일반 버전은 거의 동일한 아이디어를 제공해야합니다.

포함되지 않은 작업의 이벤트 로그에서 드로잉 이벤트는 한 번만 트리거됩니다. 일반적으로 이벤트는 0.2 밀리 초에서 3.6 밀리 초의 범위의 이벤트가 너무 오래 걸리지 않습니다. 더 깊은 세부 사항은 흥미로운 곳입니다. 이 세부 사항에서는 드로잉 영역이 전체 페이지임을 나타냅니다. 이벤트 로그에서 DevTools는 드로우 이벤트 위에 마우스를 가져 오면 그려진 페이지 영역을 강조 표시합니다. 이 경우 크기는 브라우저 뷰포트의 크기입니다. 또한 층 루트가 그려진 것을 알 수 있습니다.

자주색 상자 외부에서도 이미지의 왼쪽 페이지 영역이 강조 표시됩니다. 오른쪽에는 화면에 그려진 크기가 있습니다. 이 경우 뷰포트의 크기입니다. 향후 비교를 위해 #document를 레이어 루트로 참고하십시오.

브라우저에는 특정 요소가 그리기에 도움이되는 계층 개념이 있습니다. 레이어는 종종 새로운 스태킹 컨텍스트로 인해 서로 겹칠 수있는 요소에 사용됩니다. 예를 들어 position: relative; 및 z-index: 1; 요소에 브라우저가 요소를 새 레이어로 생성하게합니다. contain 속성은 동일한 효과를 갖습니다.

DevTools에는 "렌더링"이라는 섹션이있어 브라우저가 페이지를 어떻게 렌더링하는지 확인하기위한 다양한 도구를 제공합니다. "레이어 테두리"라는 확인란을 선택할 때 포함에 따라 다른 내용을 볼 수 있습니다. 포함되지 none 일반적인 정적 웹 페이지 레이어를 넘어 레이어를 보지 않아야합니다. content 또는 strict 선택하면 자주색 상자가 자체 레이어로 변환되고 나머지 페이지가 그에 따라 변경되는 것을 알 수 있습니다. (다른 포함 유형에 레이어를 표시하려면 스크린 샷을 여기에 삽입해야합니다)

앞에서 언급했듯이 content 과 strict 것은 드로우 이벤트가 두 번 발사됩니다. 이것은 두 가지 다른 드로잉 프로세스가 두 가지 다른 이유로 수행되기 때문입니다. 내 데모에서 첫 번째 이벤트는 보라색 상자를위한 것이고 두 번째 이벤트는 보라색 상자의 내용입니다.

일반적으로 첫 번째 이벤트는 보라색 상자를 그리고 이벤트의 일부로 해당 상자의 크기를보고합니다. 상자는 이제 자체 층이며 적용되는 이점을 누립니다.

두 번째 이벤트는 스크롤 요소이기 때문에 상자 내용에 사용됩니다. 사양에서 설명 하듯이; 스택 컨텍스트가 보장되므로 스크롤 요소는 단일 GPU 층으로 끌어들일 수 있습니다. 두 번째 이벤트에서보고 된 더 높은 크기는 스크롤 요소의 높이입니다. 아마도 스크롤 막대를위한 공간을 만들기 위해 좁을 수도 있습니다.

이 두 이미지의 오른쪽 차원의 차이에 유의하십시오. 또한, 두 이벤트의 레이어 루트는 위에 표시된 #document 대신 Change입니다. 자주색 상자는 기본 요소이므로 해당 요소 만 전체 문서 대신 그려집니다. 전체 페이지 대신 강조 표시된 상자를 볼 수 있습니다.

이것의 장점은 스크롤 요소가 일반적으로 시야에 들어갈 때 그려 지도록 만들어 질 때입니다. 격리의 두루마리 요소가 그려 졌으므로 시야에 들어갈 때 다시 그릴 필요가 없습니다. 또한 롤링 최적화도 얻습니다.

다시, 이것은 데모에서 볼 수 있습니다. (다양한 포함 유형에서 스크롤 성능을 보여 주려면 여기에 스크린 샷을 삽입해야합니다)

흥미로운 우발적 발견

위의 데모를 시도하고 그림과 스크롤 성능 측면이 어떻게 작동하는지 이해했을 때 흥미로운 문제가있었습니다. 한 번의 테스트에서는 페이지 중앙에 간단한 상자가 있지만 스타일은 최소화됩니다. 본질적으로 많은 텍스트 내용이있는 스크롤 요소입니다. 컨테이너 요소에 내용을 적용했지만 위에서 설명한 스크롤 성능 장점은 보지 못했습니다.

컨테이너에는 "스크롤의 리페인트"오버레이가 표시되어 있으며 컨텐츠가 포함 된 콘텐츠가 실제로 컨테이너에 적용된다는 것을 알고 있더라도 포함 된 도면 깜박임은 포함되지 않은 것과 동일합니다. 그래서 나는 간단한 테스트를 위에서 논의한 스타일이 풍부한 버전과 비교하기 시작했습니다.

컨테이너의 background-color 투명하다면 포함 스크롤 성능 이점이 없다는 것을 알게되었습니다.

나는 컨텐츠의 글꼴 크기를 변경하여 트리거 트리거 및 리 그리프를 트리거 할 비슷한 성능 테스트를 실행했습니다. 두 테스트의 결과는 거의 동일합니다. 유일한 차이점은 첫 번째 테스트의 background-color 투명하고 두 번째 테스트의 background-color 적절한 색상이라는 것입니다. 숫자에서 비하인드 스토리 계산은 여전히 ​​더 효율적입니다. 플로팅 이벤트 만 다릅니다. 투명한 background-color 으로 드로잉 계산에서 요소가 자체 레이어가되지 않는 것 같습니다.

첫 번째 테스트 실행에는 이벤트 로그에 하나의 드로우 이벤트 만 있습니다. 두 번째 테스트 실행에는 예상대로 두 가지 플롯 이벤트가 있습니다. 배경색이 없으면 브라우저는 포함 된 레이어 측면을 건너 뛰기로 결정한 것 같습니다. 나는 심지어 요소 뒤에있는 것과 같은 색상을 사용하여 투명성을 단조하는 것도 잘 작동한다는 것을 알았습니다. 내 생각에 컨테이너의 배경이 투명하다면 아래의 모든 것에 의존해야하므로 컨테이너를 자체 드로잉 레이어로 분리하는 것이 불가능합니다. (투명한 배경 색상과 불투명 한 배경으로 다른 결과를 표시하려면 스크린 샷을 여기에 삽입해야합니다)

컨테이너 요소의 background-color 바디 배경색과 같은 색상으로 변경 한 다른 버전의 테스트 데모를 만들었습니다. 다음은 DevTools의 "렌더링"패널에서 다양한 옵션을 사용하는 두 가지 스크린 샷입니다. (투명한 배경 색상과 불투명 한 배경으로 다른 결과를 표시하려면 스크린 샷을 여기에 삽입해야합니다)

요약

이 기사는 CSS의 기본 사항을 소개합니다. 값, 혜택 및 잠재적 성능 개선을 포함한 속성이 contain . 이 속성을 HTML의 특정 요소에 적용하면 몇 가지 이점이 있습니다. 이 속성을 적용 해야하는 요소는 귀하에게 달려 있습니다. 적어도, 그것은 내가 이해하는 것입니다. 왜냐하면 나는 특정한 지침을 모르기 때문입니다. 일반적인 아이디어는 다른 요소, 특히 역동적 인 측면을 가진 컨테이너에 적용하는 것입니다.

가능한 몇 가지 시나리오 : CSS 그리드의 그리드 영역, 타사 콘텐츠가 포함 된 요소 및 사용자 상호 작용을 기반으로 동적 컨텐츠가있는 컨테이너. 이 경우이 속성을 사용하는 데는 아무런 해가 없어야합니다.이 경우 실제로 포함되지 않은 다른 요소에 의존하는 요소를 포함 시키려고하지 않는다고 가정합니다.

브라우저 지원은 매우 강력합니다. Safari는 현재 지원되지 않는 유일한 브라우저입니다. 어쨌든 브라우저가 속성이나 그 값을 이해하지 못하면 오류없이 코드를 건너 뜁니다.

따라서 콘텐츠를 포함하여 자유롭게 시작하십시오!

위 내용은 CSS가 포함 된 재산에 깊은 다이빙을하자의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!