# 크롬85 부터 지원되는 content-visiblity 로 페이지 성능개선하기

> Clean Markdown view of GeekNews topic #2608. Use the original source for factual precision when an external source URL is present.

## Metadata

- GeekNews HTML: [https://news.hada.io/topic?id=2608](https://news.hada.io/topic?id=2608)
- GeekNews Markdown: [https://news.hada.io/topic/2608.md](https://news.hada.io/topic/2608.md)
- Type: news
- Author: [xguru](https://news.hada.io/@xguru)
- Published: 2020-08-07T12:56:53+09:00
- Updated: 2020-08-07T12:56:53+09:00
- Original source: [web.dev](https://web.dev/content-visibility/)
- Points: 3
- Comments: 0

## Topic Body

content-visibility: auto 적용만으로 화면에 안보이는 개체는 렌더링 하지 않게 해서 속도 개선

개체에 auto 지정시 CSS Containment 스펙중 layout,style,paint 가 적용되고, 해당 개체가 화면을 벗어나면 size도 적용

ㅤ→ 화면을 벗어나면 해당개체의 자손들은 전혀 안 그림

ㅤ→ 다시 화면근처에 오면 size 는 빠지고 hit-test 시작

contain-intrinsic-size 로 기본으로 그려야할 크기 지정 가능. 미지정시 0

content-visibility: hidden 지정시 화면 벗어난 것 처럼 전혀 렌더링 안함.

ㅤ→ 개체를 숨기고 렌더링도 유지하지만, 변경이 일어났다면 다시 보이게 될때 렌더링이 적용됨.

ㅤ→ display:none - 개체를 숨기고 렌더링 상태를 파괴. 즉 다시 보일때 새로 그리는거랑 마찬가지

ㅤ→ visibility:hidden - 개체를 숨기고 렌더링 상태를 유지. 실제로 문서에서 제거되지 않고 개체는 자리를 차지하며 클릭도 가능. 숨겨져 있지만 렌더링은 계속 되는 상태

## Comments



_No public comments on this page._