content-visibility: 렌더링 속도를 향상시키는 CSS property

Chromium 85에서 등장한 content-visibility속성은 페이지 로드 성능을 개선하기 위한 가장 영향력 있는 새로운 CSS 속성 중 하나일 수 있습니다. 사용자 에이전트가 필요할 때까지 레이아웃 및 페인팅을 포함한 요소의 렌더링 작업을 건너뛸 수 있습니다. 콘텐츠의 상당 부분이 화면 밖에 있는 경우 초기 사용자 로드 속도가 훨씬 빨라집니다. 또한 화면 콘텐츠와 더 빠르게 상호 작용할 수 있습니다.

 

기사 데모에서 content-visibility: auto 청크 콘텐츠 영역에 적용하면 초기 로드 시 렌더링 성능이 7배 향상됩니다.

 

 

브라우저 지원

content-visibility CSS Containment Spec 에 의존하고 대부분 브라우저에 지원됩니다.

caniuse

CSS Containment

CSS containment의 주요 목표는 나머지 페이지에서 DOM subtree를 예측 가능하게 격리하여 웹 콘텐츠의 렌더링 성능을 향상시키는 것입니다.

네 가지 유형의 CSS 포함이 있으며 각각 CSS 속성의 잠재적 값이며 contain공백으로 구분된 값 목록에 결합될 수 있습니다.

• size: 요소의 크기 제한은 요소의 상자가 하위 요소를 검사할 필요 없이 배치될 수 있도록 합니다. 즉, 요소의 크기만 필요한 경우 자손의 레이아웃을 잠재적으로 건너뛸 수 있습니다.
• layout: 레이아웃 포함은 하위 항목이 페이지에 있는 다른 상자의 외부 레이아웃에 영향을 주지 않음을 의미합니다. 이를 통해 우리가 원하는 모든 것이 다른 상자를 배치하는 경우 자손의 레이아웃을 잠재적으로 건너뛸 수 있습니다.
• style: 스타일 포함은 하위 항목 이상에 영향을 미칠 수 있는 속성이 요소(예: 카운터)를 벗어나지 않도록 합니다. 이를 통해 우리가 원하는 모든 것이 다른 요소의 스타일을 계산하는 것이라면 자손에 대한 스타일 계산을 잠재적으로 건너뛸 수 있습니다.
• paint: 페인트 포함은 포함하는 상자의 하위 항목이 경계 외부에 표시되지 않도록 합니다. 어떤 것도 요소를 눈에 띄게 오버플로할 수 없으며 요소가 화면 밖에 있거나 보이지 않는 경우 해당 하위 항목도 표시되지 않습니다. 이렇게 하면 요소가 화면 밖에 있는 경우 자손 페인팅을 잠재적으로 건너뛸 수 있습니다.

 

content-visibility로 렌더링 스킵하기

content-visibility 속성은 여러 값을 허용하지만 auto 속성을 통해 즉각적인 성능 향상을 만들어 낼 수 있습니다. layout, style and paint Containment의 효과가 있습니다. 요소가 화면 밖에 있는 경우(하위 트리에서 포커스 또는 선택 항목이 있는 요소와 같이 사용자와 관련이 없는 경우) size Containment도 얻습니다( 요소의 painting 및 hit-testing 도 중지함 ).

 

접근성에 대한 참고 사항

DOM에서 계속 사용 가능하므로 accessibility tree(visibility: hidden 와 달리)에서 사용할 수 있어서 콘텐츠가 렌더링 되기를 기다리지 않아도 되지만 화면 밖 요소에도 접근이 가능하여 혼란을 야기할 수 있습니다. 이런 경우에는 display: none, vibility: hidden, aria-hidden=true와 같은 속성을 제공해야합니다.

 

이러한 혜택을 누리기 위해 해야 할 일은 무엇입니까? 먼저 콘텐츠를 section으로 청크합니다.

.story {
  content-visibility: auto;
  contain-intrinsic-size: 1000px; /* Explained in the next section. */
}

 

contain-intrinsic-size를 통한 사용자 기본크기를 명시하기

content-visibility의 잠재적인 이점을 실현하기 위해 브라우저는 콘텐츠의 렌더링 결과가 요소 크기에 영향을 미치지 않도록 size containment를 적용해야 합니다. 요소는 비어있는 것처럼 배치되는데 일반적으로 block 요소의 높이가 지정되지 않은 경우 높이는 0이 됩니다. 이 경우 스크롤바는 각 문단 높이에 의존하게 되어 이동하므로 이상적인 상황은 아닙니다.

 

다행히도, CSS에는 contain-intrinsic-size 속성을 제공합니다. 이 속성은 요소가 size containment의 영향을 받더라도 요소를 자연스러운 크기대로 효과적으로 지정할 수 있습니다. 크기가 지정되지 않은 div가 공간을 차지할 수 있도록 “intrinsic-size”를 가진 자식 요소가 있는 것처럼 배치됩니다. contain-intrinsic-size는 렌더링 된 콘텐츠 대신 placeholder로서 동작합니다.

 

Chromium 98 이상에는 contain-intrinsic-size를 지원하는데. 지정된 경우 브라우저는 마지막으로 렌더링된 크기(있는 경우)를 기억하고 개발자가 제공한 자리 표시자 크기 대신 해당 크기를 사용합니다. 예를 들어 를 지정한 경우 contain-intrinsic-size: auto 300px요소는 각 차원에서 고유한 크기로 시작 300px하지만 일단 요소의 내용이 렌더링되면 렌더링된 고유 크기를 유지합니다. 후속 렌더링 크기 변경 사항도 기억됩니다.

 

실제로 이것은 다음을 사용하여 요소를 스크롤하면 content-visibility: auto 적용한 다음 다시 화면 밖으로 스크롤하면 이상적인 너비와 높이가 자동으로 유지되고 자리 표시자 크기 조정으로 되돌아가지 않습니다. 이 기능은 사용자가 페이지를 탐색할 때 시간이 지남에 따라 크기 추정을 자동으로 개선할 수 있는 무한 스크롤러에 특히 유용합니다. (IntersectionObserver및 MutationObserver각 요소에 대해 인라인으로 올바른 크기를 설정하는 데 사용할 수 있습니다.)

 

content-visibility: hidden로 컨텐츠 숨기기

캐시된 렌더링 상태의 이점을 활용하면서 콘텐츠가 화면에 표시되는지 여부에 관계없이 렌더링되지 않은 상태로 유지하기 위해선  content-visibility: hidden를 이용할 수 있습니다. content-visibility: hidden 속성은 마치 content-visibility: auto의 화면 밖 콘텐츠처럼 unrendered와 cached 렌더링의 장점을 제공합니다. 그러나 auto와 달리 콘텐츠가 화면 안으로 들어오더라도 자동으로 렌더링하지 않습니다. 이런 제어를 통해 요소를 숨겼다가 나중에 신속하게 다시 표시할 수 있습니다.

• display: none: 요소를 숨기고 렌더링 상태를 제거합니다. 즉, 해당 요소를 표시하기 위해서는 새 요소를 렌더링 하는 것만큼 비용이 많이 듭니다. (vue.js에서 v-if)
• visibility: hidden: 요소를 숨기면서 렌더링 상태는 유지합니다. 이것은 문서에서 요소를 실제로 제거하지 않으며, 여전히 페이지에서 공간을 차지하고 클릭할 수 있는 상태입니다. 또한 숨겨져 있더라도 필요하면 렌더링 상태를 업데이트합니다. (vue.js에서 v-show)

content-visibility: hidden는 렌더링 상태를 유지하면서 요소를 숨기므로 발생해야 하는 변경 사항이 있는 경우 요소가 다시 표시될 때만 발생합니다

 

https://web.dev/content-visibility/

content-visibility: the new CSS property that boosts your rendering performance