content-visibility : 렌더링 기능을 향상시키는 새로운 CSS 속성

1. content-visibility 속성이란?

 2020년 8월 25일, Chrome 85에 새로운 CSS 속성<content-visibility>가 추가됐다.

 

 가장 핵심적인 효과는 **화면 밖에 있는 컨텐츠의 렌더링을 건너뜀으로써 페이지 초기 로드 시간을 획기적으로 줄인다는 것이다.

 더 구체적으로 말하면 웹브라우저(또는 앱)가 초기에 페이지를 로딩할 때에 **화면 밖의 컨텐츠에 대해 일부의 렌더링 작업만을 하는 것이다. 이는  content-visibility : auto ;  값을 입력함으로써 가능하고, 페이지 초기 로딩 시간이 단축되는 효과를 갖는다. 아래와 같이 실제 실험 결과 렌더링 성능이 7배 향상됐다는 것을 확인할 수 있다.

 

 

**화면 밖  = off-screen

: 사용자 액션, 즉 선택되거나 포커스를 받는 등의 작용이 이뤄지지 않은 경우

: 또는 스크롤 하지 않아 아직 보여지지 않은 영역

 

 

2. content-visibility 지원 가능 브라우저는?

content-visibility는 CSS Containment Spec에 의존하고 있다.

현재 Chrome 85만 지원하지만, Containment Spec은 대부분의 모던 브라우저에서 지원하고 있다.

 

3. 여기서 CSS Containment란?

CSS Containment Module은 웹페이지 전체에서 특정 하위 트리의 영역(DOM SubTree)을 잡고 이를 독립된 영역으로 인식시키는 기능을 한다. 브라우저로 하여금 해당 컨텐츠가 외부 요소의 상태에 반응하지 않아도 된다는 것을 알도록 하는 것이다. 브라우저는 불필요한 작업을 생략하게 되므로 웹페이지 최적화와 성능 향상을 이루게 된다.

 

CSS Containment는 CSS에서 <contain> 속성으로 사용된다.

selector {contain:none | strict | content | [ size || layout || style || paint ]}

size	contain 요소의 size 분리를 설정한다. contain 요소의 크기는 하위 자손에 대해 독립적인 상태로, 내부의 크기에 대한 검사를 하지 않고 바로 레이아웃 할 수 있다. 특별한 사이즈를 설정하지 않았을 경우 0픽셀로 렌더링된다. (contain:none 요소는 부모가 자손 size만큼 layout을 잡는다.)
layout	contain 요소의 layout에 대한 분리를 설정한다. contain 요소는 외부의 어떠한 요소에도 영향을 받을 수 없고 줄 수도 없는 상태가 된다. 다른 요소의 레이아웃만 필요할 경우에 자손 요소의 레이아웃을 생략할 수 있다.
style	contain 요소의 style에 대한 분리를 설정한다. 이 경우 counters, qoutes와 같이 요소에 영향을 미칠 수 있는 속성이 cotain 요소를 벗어나지 못하도록 한다.
paint	contain 요소의 paint에 대한 분리를 설정한다. 이 경우 contain 요소의 하위 자손이 contain요소의 paint 영역 외부에는 표현 될 수 없다.(overflow:hidden과 같은 현상) 이에 따라서 contain 요소가 화면의 밖에 위치하거나 보이지 않는 상태라면 하위 자손은 표현되지 않는다.

 

CSS Containment참고 사이트

wit.nts-corp.com/2019/07/08/5594

 

4. content-visibility와 CSS Containment

*  content-visibility : auto ;  값을 지정하면?)

-Containment의 layout, style, paint 효과를 가지게 된다.

-요소가 off-screen이면 size 효과도 부여된다.

 

이 말은 요소가 off-screen이면 자손 요소를 렌더링하지 않는다는 것이다. 즉 브라우저는 요소의 내용을 고려하지 않고 크기를 결정한다. 또 해당 요소의 <자손 요소>는 styling, layout 등과 같은 많은 렌더링 작업을 생략한다.

 

그러나 요소가 뷰포트에 접근하게 되면 브라우저는 더 이상 size Containment를 유지하지 않고, 사용자가 볼 수 있도록 렌더링 작업(painting과 **hit-testing)을 진행한다.

 

 

**hit-testing이란?) 사용자로부터 입력된 touch event가 어떤 view에서 발생했는지 알아내고 그 view에 touch event를 전달하는 과정

 

 

5. 예제

다음은 페이지 로드 시의 과정이다.

 

1. 페이지의 일부를 필요한 리소스와 함께 네트워크를 통해 다운로드 합니다.
2. 브라우저는 사용자에게 보여지는지 여부와 관계없이 모든 콘텐츠의 스타일, 레이아웃 작업을 진행합니다.
3. 페이지 전부와 모든 리소스가 다운로드 될때까지 반복합니다.

 위의 2단계에서 브라우저는 새롭게 변경되었을 수 있는 부분을 찾기 위해서 모든 콘텐츠를 처리한다. 즉, 새로운 업데이트의 결과로 새 요소와 그에 따라 변경되었을 요소의 스타일, 레이아웃을 업데이트 한다. 이것들이 곧 렌더링 작업이며 시간이 잡아먹는 일이다.

 

 

=> 이때, 페이지의 각 Section에 content-visibility : auto ;를 설정하면

 

 일반적인 단계 진행은 똑같다. 브라우저가 페이지의 일부를 다운로드하고 렌더링한다. 그러나 차이점은 2단계에서 수행하는 작업의 양에 있다.

 content-visibility를 통해 <화면 내 콘텐츠>의 스타일과 레이아웃 작업을 진행한다. 하지만 요소가 완전히 <화면 밖>에 있는 경우라면 브라우저는 해당 요소 박스의 스타일과 레이아웃만 처리하고 다른 렌더링 작업은 생략한다.

 

 이 페이지의 로딩 성능은 마치 화면 내 콘텐츠 전부와 화면 밖 콘텐츠는 빈 상자만 로딩 하는 것과 같다. 이는 예상되는 렌더링 비용에서 50% 이상을 감소하는 효과로 훨씬 더 나은 성능을 발휘한다.

 

 

 

 

참고사이트

wit.nts-corp.com/2020/09/11/6223?fbclid=IwAR0W6fxGx3-zCzpN82Qn7MLnE3zAanW2d4h7yN1onFtGIKgAEjWuz2a_w2M