CSS contain

Creator

Creator

Seonglae Cho

Created

Created

2022 Jan 28 14:1

Editor

Editor

Seonglae Cho

Edited

Edited

2022 Feb 4 2:56

Refs

Refs

개발자가 페이지의 하위 트리(subtree)를 페이지의 나머지 부분과 분리할 수 있도록 하여 웹 페이지의 성능을 향상시키는 것

웹페이지에서 선택된 하위 트리를 문서의 나머지 영역과 분리하는 기능

성능향상에 좋다

strict - contain: size layout paint

layout - 요소 외부의 어느 것도 내부 레이아웃에 영향을 주지 않고, 그 반대도 성립함

paint - 화면 그 자체 렌더링 외부 영향 없음

size - 요소 내부 것 사이즈 안재고

none

content

style - style 이 외부로 벗어나지 않는다

CSS Containment Module 소개 | WIT블로그

HTML과 CSS를 사용하여 웹 페이지를 제작할 때 중요하게 생각해야 하는 것은 무엇일까요? 최종적으로는 디자인 가이드나 기획서 등 산출물을 바탕으로 동일한 화면을 출력하는 것일 텐데요 이 과정에서 좀 더 최적화된 웹 페이지를 만들어내는 것 또한 중요한 과제일 것입니다. 웹페이지에서는 종종 불필요한 작업이 일어납니다.

CSS Containment Module 소개 | WIT블로그

https://wit.nts-corp.com/2019/07/08/5594

CSS Containment Module 소개 | WIT블로그

CSS Containment - CSS: Cascading Style Sheets | MDN

CSS Containment 사양의 목표는 개발자가 페이지의 하위 트리(subtree)를 페이지의 나머지 부분과 분리할 수 있도록 하여 웹 페이지의 성능을 향상시키는 것입니다. 브라우저가 페이지의 일부가 독립적임을 인식하면 렌더링을 최적화 하고 성능을 개선 할 수 있습니다. 사양은 단일 CSS 속성(property) 을 정의합니다. 이 문서는 사양의 기본 목표를 설명합니다. 많은 웹 페이지에는 서로 독립적인 여러 섹션이 포함되어 있습니다.

CSS Containment - CSS: Cascading Style Sheets | MDN

https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Containment

CSS Containment - CSS: Cascading Style Sheets | MDN

[스압/데이터주의] 웹 최적화 방식 모음 - 3. Layout 및 렌더링

레이아웃에 영향을 미치는 것들에 대한 정리는 What forces layout/reflow 란 글이 잘 설명해준다. 3.1.1 CSS 속성 개요 분류: CSS 이야기가 나온김에 리플로우에 영향을 미치는 유명한 CSS 요소들을 뽑아보자면 [ CSS Triggers, 20 Tips for Optimizing CSS Performance] 이 있다. 그리고 재계산을 유발하기로 유명한 속성은 다음이 있으며 불필요하게 값을 수정하지 않는게 좋다.

[스압/데이터주의] 웹 최적화 방식 모음 - 3. Layout 및 렌더링

https://black7375.tistory.com/79

[스압/데이터주의] 웹 최적화 방식 모음 - 3. Layout 및 렌더링

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!

CSS Containment in Chrome 52 | Web | Google Developers

https://developers.google.com/web/updates/2016/06/css-containment

CSS Containment in Chrome 52 | Web | Google Developers

Recommendations

////////