content-visibility: auto 적용만으로 화면에 안보이는 개체는 렌더링 하지 않게 해서 속도 개선
개체에 auto 지정시 CSS Containment 스펙중 layout,style,paint 가 적용되고, 해당 개체가 화면을 벗어나면 size도 적용
ㅤ→ 화면을 벗어나면 해당개체의 자손들은 전혀 안 그림
ㅤ→ 다시 화면근처에 오면 size 는 빠지고 hit-test 시작
contain-intrinsic-size 로 기본으로 그려야할 크기 지정 가능. 미지정시 0
content-visibility: hidden 지정시 화면 벗어난 것 처럼 전혀 렌더링 안함.
ㅤ→ 개체를 숨기고 렌더링도 유지하지만, 변경이 일어났다면 다시 보이게 될때 렌더링이 적용됨.
ㅤ→ display:none - 개체를 숨기고 렌더링 상태를 파괴. 즉 다시 보일때 새로 그리는거랑 마찬가지
ㅤ→ visibility:hidden - 개체를 숨기고 렌더링 상태를 유지. 실제로 문서에서 제거되지 않고 개체는 자리를 차지하며 클릭도 가능. 숨겨져 있지만 렌더링은 계속 되는 상태