[CSS] 메모리 부담을 고려한 웹 성능 최적화: Composite 단계 CSS 속성 활용

CSS 랜더링 과정은 레이아웃(Layout), 페인트(Paint), 컴포짓(Composite) 단계를 거쳐 화면에 웹페이지를 표시하는데 각각의 단계에서 브라우저는 다른 작업을 수행합니다. 이에 대해 알아봅시다.

 

Layout (레이아웃) 

레이아웃 단계에서 브라우저는 요소들의 위치와 크기를 결정합니다. 이 단계에서는 각 요소의 크기, 위치, 레이아웃 트리(layout tree)를 구축하는 과정이 포함되어 있습니다. 브라우저는 요소의 스타일과 구조를 분석하고, 각 요소의 크기와 위치를 계산해 화면에 배치합니다.

Paint (페인트) 

레이아웃이 단계가 완료되면, 브라우저는 화면에 표시할 내용을 그리는 작업을 합니다. 이 단계에서는 픽셀을 채우고 색상을 입히는 등의 작업이 이뤄집니다. 이는 각 요소의 스타일과 내용에 따라 결정되는데, 예를 들어 배경색, 테두리, 텍스트 등이 여기에 포함됩니다.

Composite (컴포짓, 합성)

페인트 단계에서 그려진 요소들이 적절한 순서와 방식으로 조합되어 화면에 표시됩니다. 이는 브라우저의 내부 과정으로, 각 요소가 화면에 나타날 위치를 결정하고, 필요한 경우 레이어를 합성해 최종 화면을 생성합니다. 이 단계에서는 요소들이 겹쳐져 있을 때 적절한 순서로 그려져 화면에 표시되도록 합니다.

 

CSS 속성 선택과 웹 성능

메모리 부담을 고려하여 CSS 속성을 선택하고 사용하는 것은 웹 성능을 향상하는데 도움이 됩니다. 특히 레이아웃과 페인트 단계에서 메모리 사용량이 많을 수 있으므로, 모바일 기기나 메모리 제한이 있는 환경에서는 이를 고려하여 최적화하는 것이 중요합니다.

 

아래의 속성들은 composite 단계에서만 처리됩니다. 이를 활용하여 메모리 부담을 줄이고 웹 성능을 향상할 수 있습니다

 

Composite 단계에 영향을 주는 CSS 속성들

- opacity : 투명도가 변경되면 브라우저가 요소의 레이어를 다시 합성해야 하므로, composite 단계에서만 영향을 미칩니다.

- transform : 변형은 요소의 레이아웃이나 페인트 단계에 영향을 주지 않고, 브라우저가 레이어를 합성할 때만 적용됩니다.

- filter

- will-change ...등등

Layout 단계에 영향을 주는 CSS 속성들

- width, height : 요소의 크기를 결정하는 데 사용되어 layout 단계에서 처리됩니다.

- margin, padding : 요소의 배치와 크기를 결정하는데 중요한 역할을 하며, layout 단계에서 처리됩니다.

- position : 요소의 배치에 영향을 주므로 layout 단계에서 처리됩니다.

- display : 요소의 표시 방법으로 레이아웃이 결정되므로 layout 단계에서 처리됩니다.

- float

- overflow ...등등

 

참고 사이트 추천!

단계별 영향을 주는 CSS 속성들에 대해 더 자세히 알고 싶다면 아래의 사이트를 참고해 주세요!

 

CSS Triggers

 

 

 

메모리 부담을 고려하여 CSS 속성을 선택하고 사용하는 것은 웹 성능을 향상하는 중요한 요소입니다. 특히 composite 단계에서만 처리되는 속성을 활용하여 메모리 부담을 줄이면서도 웹 페이지의 로딩 속도와 사용자 경험을 개선할 수 있습니다. 따라서 웹 개발자들은 이러한 최적화 전략을 적극적으로 활용하여 웹 성능을 향상하는데 주력해야 합니다.

 

 

 

[Server] QuickConnect로 외부에서 서버 접속하는 방법

[CSS] 유튜브(Youtube) 영상을 비율 유지한 채 반응형으로 삽입하는 방법

[Git] GitHub에서 Pull Request(PR) 올리는 방법: 초보자를 위한 안내

[Utility] Jump Desktop을 활용한 원격 접속 : 어디서든 컴퓨터를 제어하세요!

[Javascript] 브라우저 창 크기를 측정하는 주요 속성들에 대해서 알아보자