- display: none) 스타일이면 돔 조작이나 스타일 변경시에도 레이아웃, 리페인트가 생기지 않음
- visibility: hidden일 경우 리페인트는 발생하지 않아도 레이아웃은 계산
content-visibility: hidden:숨기며 렌더링 상태는 유지. 상태를 변경할 일이 생기면 화면에 표시될 때만 변경
content-visibility - CSS: Cascading Style Sheets | MDN
The content-visibility CSS property controls whether or not an element renders its contents at all, along with forcing a strong set of containments, allowing user agents to potentially omit large swathes of layout and rendering work until it becomes needed.
https://developer.mozilla.org/en-US/docs/Web/CSS/content-visibility
[스압/데이터주의] 웹 최적화 방식 모음 - 3. Layout 및 렌더링
레이아웃에 영향을 미치는 것들에 대한 정리는 What forces layout/reflow 란 글이 잘 설명해준다. 3.1.1 CSS 속성 개요 분류: CSS 이야기가 나온김에 리플로우에 영향을 미치는 유명한 CSS 요소들을 뽑아보자면 [ CSS Triggers, 20 Tips for Optimizing CSS Performance] 이 있다. 그리고 재계산을 유발하기로 유명한 속성은 다음이 있으며 불필요하게 값을 수정하지 않는게 좋다.
![[스압/데이터주의] 웹 최적화 방식 모음 - 3. Layout 및 렌더링](https://www.notion.so/image/https%3A%2F%2Fblack7375.tistory.com%2Ffavicon.ico?table=block&id=48fbbf09-7d01-480e-b32f-a21ec068377a&cache=v2){kind=small}
https://black7375.tistory.com/79
![[스압/데이터주의] 웹 최적화 방식 모음 - 3. Layout 및 렌더링](https://www.notion.so/image/https%3A%2F%2Fimg1.daumcdn.net%2Fthumb%2FR800x0%2F%3Fscode%3Dmtistory2%26fname%3Dhttps%253A%252F%252Fblog.kakaocdn.net%252Fdn%252FFM5Z5%252FbtqWWsOdWiT%252FKHI0LMAvyNP2FC6IaoYy6k%252Fimg.png?table=block&id=48fbbf09-7d01-480e-b32f-a21ec068377a&cache=v2)
display:none 과 visibility:hidden 의 차이
아예 사라지게 하는것. 보이지도 않고 해당 공간도 존재하지 않게 됨 2. visibility:hidden visible 보이지만 않고 해당 공간은 존재. width와 height값을 주었다면 그만큼 공간은 존재하게 됨 3. display = "" 하면 디폴트 값이 쓰여지게 되는데 이때 span 태그 안에 있으면 inline div 태그 안에 있으면 block 가 쓰여지게 된다.
https://unabated.tistory.com/entry/displaynone-%EA%B3%BC-visibilityhidden-%EC%9D%98-%EC%B0%A8%EC%9D%B4
