content-visibility :

랜더링 성능을 향상 시키는 CSS 속성.

content-visibility는 Chromium 85에 새로 적용된 CSS속성으로 페이지 렌더링 성능을 향상시켜준다.

이 속성을 통해 user-agent가 필요할 때까지 레이아웃과 그림을 포함한 모든 렌더링 작업을 건너뛰도록 할 수 있다. 컨텐츠가 숨겨져 있거나 화면 밖에 있는 경우 이미지나 iFrames를 포함하는 섹션은 아직 렌더링을 할 필요가 없기 때문에 content-visibility을 활용해서 초기 로드 시간이 빨라 질 수 있다.

content-visibility: auto를 적용하면 초기 랜더링 성능이 7배 향상된다. (WIT블로그 참고)

Browser Support

content-visibility는 CSS Containment Spec에 의존하고 있다. Chromium 85에 새로 추가되었고, Chrome, Edge, Opera 최신 버전에서 지원된다.

How to use it

• visible : 기본값이며 아무 효과도 없다. 요소의 내용이 배치되고 정상적으로 렌더링된다.
• hidden : 내용을 완전히 건너 뛴다. 이것은 사실상 'display: none' 과 같다.
• auto : 즉시 성능 향상을 제공한다. layout, style, paint를 Containment하는 효과가 있고, 요소가 화면 밖이면 size Containment 효과도 얻는다. 요소가 화면에 벗어난 경우 하위 요소는 렌더링 되지 않는다. 하위 요소는 styling, layout과 같은 대부분의 렌더링 작업을 생략한다.

.element {
    content-visibility: auto;
    contain-intrinsic-size: 1000px;
}

하지만 여기서 문제가 발생한다. 요소의 높이는 요소에 'display: none;'했을 때와 마찬가지로 0이 된다. 이럴때 contain-intrinsic-size 속성을 사용한다. 이 속성은 요소가 size containment의 영향을 받더라도 요소를 자연스러운 크기대로 효과적으로 지정할 수 있다. 이 요소의 너비와 높이 추정치로 1000px를 설정해 주었다.

Hiding Content With content-visibility: hidden

.element {
    content-visibility: hidden;
}

content-visibility: hidden;

이 요소를 사용하면 캐시된 렌더링 상태의 이점을 활용하며, 콘텐츠가 화면에 있는지 여부와 상관 없이 렌더링 되지 않는 상태가 되고, 사용자 뷰에서 완전히 사라진다. 이런 제어를 통해 요소를 숨겼다가 나중에 신속하게 다시 표시할 수 있다.

요소를 숨기는 다른 요소와 비교해 보자면,

• display: none: 요소를 숨기고, 렌더링 상태를 제거한다. 즉, 해당 요소를 표시하기 위해서는 새 요소를 렌더링 하는 것만큼 비용이 많이 든다.

• visibility: hidden: 요소를 숨기고, 렌더링 상태는 유지한다. 이것은 문서에서 요소를 실제로 제거하지 않으며, 여전히 페이지에서 공간을 차지하고 클릭할 수 있는 상태이다. 또한 숨겨져 있더라도 필요하면 렌더링 상태를 업데이트한다.

• content-visibility:hidden: 반면에 이 속성은 렌더링 상태를 유지하면서 요소를 숨긴다. 따라서 변경이 필요한 경우 요소가 다시 표시 될 때만 발생한다. (예로 content-visibility : hidden 속성이 제거될 경우)

참고

• https://web.dev/content-visibility/
• https://javascript.plainenglish.io/improve-rendering-performance-with-the-new-css-content-visibility-property-7e0c9b425b58