Seonglae Cho개발자가 페이지의 하위 트리(subtree)를 페이지의 나머지 부분과 분리할 수 있도록 하여 웹 페이지의 성능을 향상시키는 것
웹페이지에서 선택된 하위 트리를 문서의 나머지 영역과 분리하는 기능
성능향상에 좋다
- strict -
contain: size layout paint
- layout - 요소 외부의 어느 것도 내부 레이아웃에 영향을 주지 않고, 그 반대도 성립함
- paint - 화면 그 자체 렌더링 외부 영향 없음
- size - 요소 내부 것 사이즈 안재고
- none
- content
- style - style 이 외부로 벗어나지 않는다
CSS Containment Module 소개 | WIT블로그
HTML과 CSS를 사용하여 웹 페이지를 제작할 때 중요하게 생각해야 하는 것은 무엇일까요? 최종적으로는 디자인 가이드나 기획서 등 산출물을 바탕으로 동일한 화면을 출력하는 것일 텐데요 이 과정에서 좀 더 최적화된 웹 페이지를 만들어내는 것 또한 중요한 과제일 것입니다. 웹페이지에서는 종종 불필요한 작업이 일어납니다.
https://wit.nts-corp.com/2019/07/08/5594
CSS Containment - CSS: Cascading Style Sheets | MDN
CSS Containment 사양의 목표는 개발자가 페이지의 하위 트리(subtree)를 페이지의 나머지 부분과 분리할 수 있도록 하여 웹 페이지의 성능을 향상시키는 것입니다. 브라우저가 페이지의 일부가 독립적임을 인식하면 렌더링을 최적화 하고 성능을 개선 할 수 있습니다. 사양은 단일 CSS 속성(property) 을 정의합니다. 이 문서는 사양의 기본 목표를 설명합니다. 많은 웹 페이지에는 서로 독립적인 여러 섹션이 포함되어 있습니다.
https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Containment
[스압/데이터주의] 웹 최적화 방식 모음 - 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=1559fbab-6c6b-4ee8-9f27-7a41fad892c6&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=1559fbab-6c6b-4ee8-9f27-7a41fad892c6&cache=v2)
CSS Containment in Chrome 52 | Web | Google Developers
The new CSS Containment property lets developers limit the scope of the browser's styles, layout and paint work. It has a few values, making its syntax this: contain: none | strict | content | [ size || layout || style || paint ] It's in Chrome 52+ and Opera 40+ (and it has public support from Firefox), so give it a whirl and let us know how you go!
https://developers.google.com/web/updates/2016/06/css-containment
