요약
개발자는 새로운 CSS Containment 속성을 사용하여 브라우저의 스타일, 레이아웃 및 페인트 작업 범위를 제한할 수 있습니다.
몇 가지 값이 있으며 문법은 다음과 같습니다.
contain: none | strict | content | [ size || layout || style || paint ]
Chrome 52 이상 및 Opera 40 이상 (Firefox의 공개 지원)에서 사용 가능합니다. 사용 방법을 알려주세요.
include 속성
웹 앱이나 복잡한 사이트를 만들 때 가장 중요한 성능 문제는 스타일, 레이아웃, 페인트의 효과를 제한하는 것입니다. DOM의 전체가 계산 작업의 '범위 내'로 간주되는 경우가 종종 있습니다. 이는 웹 앱에서 자체 포함된 '뷰'를 시도하는 것이 까다로울 수 있다는 것을 의미합니다. DOM의 한 부분을 변경하면 다른 부분에 영향을 줄 수 있으며, 범위에 포함되거나 범위를 벗어나는 항목을 브라우저에 알릴 방법이 없습니다.
예를 들어 DOM의 일부가 다음과 같다고 가정해 보겠습니다.
<section class="view">
Home
</section>
<section class="view">
About
</section>
<section class="view">
Contact
</section>
그리고 하나의 뷰에 새 요소를 추가하면 스타일, 레이아웃, 페인트가 트리거됩니다.
<section class="view">
Home
</section>
<section class="view">
About
<div class="newly-added-element">Check me out!</div>
</section>
<section class="view">
Contact
</section>
하지만 이 경우 전체 DOM이 사실상 범위 내에 있습니다. 즉, 스타일, 레이아웃, 페인트 계산 시 변경 여부와 관계없이 모든 요소를 고려해야 합니다. DOM이 클수록 더 많은 계산 작업이 필요합니다. 즉, 앱이 사용자 입력에 응답하지 않도록 할 수 있습니다.
좋은 소식은 최신 브라우저가 스타일, 레이아웃 및 페인트 작업의 범위를 자동으로 제한하는 매우 스마트해지고 있다는 것입니다. 즉, 아무것도 하지 않아도 작업이 빨라집니다.
하지만 더 좋은 소식은 개발자에게 범위 제어 기능을 제공하는 새로운 CSS 속성인 Containment가 있다는 것입니다.
CSS Containment는 다음 네 가지 값을 지원하는 include 키워드를 사용하는 새로운 속성입니다.
layoutpaintsizestyle
이러한 각 값을 사용하면 브라우저가 실행해야 하는 렌더링 작업의 양을 제한할 수 있습니다. 각각을 좀 더 자세히 살펴보겠습니다.
레이아웃 (포함: 레이아웃)
레이아웃 포함은 아마도 contain: paint와 함께 억제를 통해 얻을 수 있는 가장 큰 이점인 것일 것입니다.
레이아웃은 일반적으로 문서 범위이므로 DOM 크기에 비례하여 확장됩니다. 따라서 요소의 left 속성을 변경하면 DOM의 모든 단일 요소를 확인해야 할 수도 있습니다.
여기에서 격리를 사용 설정하면 요소 수가 전체 문서가 아닌 소수의 요소로 줄어들어 브라우저에서 불필요한 작업을 많이 줄이고 성능을 크게 개선할 수 있습니다.
페인트 (포함: 페인트)
범위 지정 페인트는 격리의 또 다른 유용한 이점입니다. 페인트 포함은 기본적으로 문제의 요소를 자르지만 몇 가지 다른 부작용도 있습니다.
- 완전히 배치되고 고정된 위치 요소의 포함 블록 역할을 합니다. 즉, 모든 하위 요소는 문서와 같은 다른 상위 요소가 아닌
contain: paint가 있는 요소를 기반으로 배치됩니다. - 스태킹 컨텍스트가 됩니다. 즉,
z-index와 같은 항목이 요소에 영향을 미치고 하위 요소는 새 컨텍스트에 따라 스택됩니다. - 새로운 서식 지정 컨텍스트가 됩니다. 즉, 예를 들어 페인트 포함이 포함된 블록 수준 요소가 있다면 이 요소는 새로운 독립적인 레이아웃 환경으로 처리됩니다. 즉, 요소 외부의 레이아웃은 일반적으로 포함된 요소의 하위 요소에 영향을 미치지 않습니다.
크기 (포함: 크기)
contain: size의 의미는 요소의 하위 요소가 상위 요소의 크기에 영향을 미치지 않으며 추론되거나 선언된 크기가 사용된다는 것입니다. 따라서 contain: size를 설정했지만 요소의 크기를 직접 또는 Flex 속성을 통해 지정하지 않은 경우 0x0픽셀로 렌더링됩니다.
크기 포함은 크기 조정을 위해 하위 요소에 의존하지 않도록 하기 위한 벨트와 버팀대 수단이지만 그 자체로는 큰 성능상의 이점을 제공하지 않습니다.
스타일 (포함: 스타일)
요소의 스타일을 변경하는 DOM 트리의 효과가 트리에서 어떻게 되는지 예측하기 어려울 수 있습니다. 이러한 예 중 하나는 CSS 카운터로, 하위 요소의 카운터를 변경하면 문서의 다른 부분에서 사용된 것과 동일한 이름의 카운터 값에 영향을 줄 수 있습니다. contain: style를 설정하면 스타일 변경사항이 포함된 요소를 지나 다시 전파되지 않습니다.
명확히 말하면 contain: style가 제공하지 않는 것은 Shadow DOM에서 얻는 것과 같이 범위가 지정된 스타일 지정입니다. 여기서 포함은 스타일이 선언될 때가 아니라 스타일이 변경될 때 고려 중인 트리 부분을 제한하는 것뿐입니다.
엄격한 콘텐츠 포함
contain: layout paint과 같은 키워드를 결합하여 요소에 이러한 동작만 적용할 수도 있습니다. 하지만 include는 다음 두 개의 추가 값도 지원합니다.
contain: strict는contain: size layout paint와 같은 값을 의미합니다.contain: content는contain: layout paint와 같은 값을 의미합니다.
엄격한 포함을 사용하는 것은 요소의 크기를 미리 알고 있거나 크기를 예약하려는 경우 유용하지만, 크기를 포함하지 않고 엄격한 포함을 선언하면 암시적인 크기 포함으로 인해 요소가 0x0픽셀 상자로 렌더링될 수 있다는 점에 유의하세요.
반면, 콘텐츠 포함은 범위를 크게 개선하지만 요소의 크기를 미리 알거나 지정할 필요는 없습니다.
둘 중 contain: content가 기본적으로 사용해야 하는 항목입니다. contain: content이 요구사항을 충족할 만큼 강력하지 않은 경우 엄격한 격리를 일종의 탈출 수단이라고 생각해야 합니다.
승차 경로를 알려주세요.
격리는 페이지 내에서 격리하려는 내용을 브라우저에 나타내기 시작하는 좋은 방법입니다. Chrome 52 이상에서 사용해 보고 사용 방법을 알려주세요.