CSS display & visibility
[DOM Rendering](https://texonom.com/dom-rendering-3a95ccf68d9e4a9ab03b96b5e40b9fb4) 



[CSS object](https://texonom.com/css-object-9422d4345d83435fb358bdb7feb88f2b)

- display: none) 스타일이면 돔 조작이나 스타일 변경시에도 레이아웃, 리페인트가 생기지 않음
- visibility: hidden일 경우 리페인트는 발생하지 않아도 레이아웃은 계산
- `content-visibility: hidden:` 숨기며 렌더링 상태는 유지. 상태를 변경할 일이 생기면 화면에 표시될 때만 변경


> [content-visibility - CSS: Cascading Style Sheets | MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/content-visibility)

> [[스압/데이터주의] 웹 최적화 방식 모음 - 3. Layout 및 렌더링](https://black7375.tistory.com/79)

> [display:none 과 visibility:hidden 의 차이](https://unabated.tistory.com/entry/displaynone-%EA%B3%BC-visibilityhidden-%EC%9D%98-%EC%B0%A8%EC%9D%B4)





