CSS와 브라우저 렌더링 최적화

CSS란?

 

CSS는 HTML이나, XML으로 작성된 문서의 표시 방법을 기술하기 위한 스타일시트 언어이며, 웹페이지를 꾸미기 위한 코드

 

또한, CSS는 요소가 화면, 종이, 음성이나 다른 매체 상에 어떻게 렌더링되야 하는지 지정합니다.

 

 

 

브라우저 렌더링 과정의 4단계

파싱 (Parse):

HTML 및 CSS 문서를 해석하고 이해하는 과정입니다.
재미난 비유: 마법사가 주문서를 읽어서 그 내용을 이해하는 것과 비슷합니다. 브라우저는 HTML을 읽고 DOM(문서 객체 모델) 트리를 만들고, CSS를 해석하여 스타일 규칙을 생성합니다.

 

 

레이아웃 (Layout):

설명: DOM 트리와 스타일 규칙을 기반으로 각 요소의 크기와 위치를 계산하는 단계입니다.
재미난 비유: 가구를 배치하는 인테리어 디자이너처럼, 브라우저는 각각의 HTML 요소에 대해 화면에 어떻게 배치할지 결정합니다.

 

페인트 (Paint):

설명: 각 요소의 실제 픽셀을 그리는 단계로, 색상 및 배경과 같은 스타일을 적용합니다.
재미난 비유: 화가가 그림을 그리듯이, 브라우저는 화면에 어떻게 보일지에 대한 최종적인 스타일을 적용하여 화면에 그림을 그립니다.

합성 (Composite):

설명: 각각의 페인팅된 요소를 합쳐서 최종 화면을 만드는 단계입니다.
재미난 비유: 여러 개의 투명한 슬라이드를 겹쳐서 한 장의 이미지를 만드는 것과 유사합니다. 브라우저는 모든 그림을 하나로 합쳐 최종 결과물을 만듭니다.

 

 

최적화 하기

Layout 단계의 Reflow 최소화

리플로우(Reflow)는 브라우저에서 웹 페이지의 레이아웃이 변경될 때 발생하는 프로세스를 나타냅니다. 레이아웃은 각 요소의 크기와 위치를 계산하는 단계로, 이런 변화가 있을 때 브라우저는 해당 변경 사항을 반영하여 다시 레이아웃을 계산합니다. 이 때 발생하는 과정이 리플로우입니다.

 

 

transfrom의 translate vs  translate3d(x, y, 0);

 

translate와 translate3d 모두 CSS의 변형(Transform) 중 하나로, 요소를 이동시키는 데 사용됩니다.
두가지 모두 GPU 가속을 활용할 수 있는 방법인데요,

그러나 두 가지의 차이점이 있습니다.

translate: translate는 2D 변형에 사용됩니다. 예를 들어, translate(50px, 100px)은 요소를 가로로 50픽셀, 세로로 100픽셀 이동시킵니다.

translate3d: translate3d는 3D 변형에 사용됩니다. 이는 translate와 유사하지만, Z(깊이) 축으로도 이동할 수 있습니다. 예를 들어, translate3d(50px, 100px, 0)은 요소를 가로로 50픽셀, 세로로 100픽셀 이동시키면서 Z 축으로는 이동하지 않습니다.


1. 하드웨어 가속 및 성능:

대부분의 브라우저는 translate3d를 사용하면 하드웨어 가속을 활용하여 성능을 최적화할 수 있다는 특징이 있습니다. 
특히 모바일 기기에서 스크롤 및 애니메이션 성능을 향상시키기 위해 translate3d를 권장하는 경우가 많습니다.

translate의 경우, 브라우저가 자동으로 2D나 3D 변환 중 어떤 것이 더 효율적인지 결정합니다. 
그러나 성능 차이가 더 중요한 경우에는 직접 translate3d를 사용하는 것이 좋을 수 있습니다.

브라우저 Composite 단계의 Graphics Layer

2. 레이어 생성

translate3d를 사용하면 브라우저는 해당 요소를 별도의 레이어(layer)로 처리할 가능성이 높습니다. 
별도의 레이어로 처리하면 해당 요소의 변형이 다른 레이어에 영향을 미치지 않아 레이아웃 계산이 최적화됩니다.

 

=> 애니메이션이 적용된 이미지를 별도의 레이어로 분리해 별도의 레스터화 과정을 생각할 수 있고, 합성단계에서 이미지의 위치만 계산

 

모든  경우에 GPU를  사용하는게 좋을까?

당연하게도 답은 NO입니다. 아래의 사항을 고려해서 사용을 해야하는데요

 

1. 레이어 정보를 GPU의 비디오 메모리에도 저장하게 되어 추가적인 메모리 점유 발생

 

2. CPU에서 GPU 데이터 전달 과정에서 지연 시간 발생

3. 일부 연산의 경우 CPU에서의 연산이 더 빠른 케이스 존재

 

4. 모바일 기준 GPU의 전력 소모량이 1.5 ~ 2배 가량 추가적인 소모

 

 

아래의 경우를 보면

 

translate3d는 비디오 메모리가 41~ 50 mb가 유지되고 있음

translate는 비디오 메모리가 12mb 정도에서 머무르는 것을 확인할 수 있습니다.

 

 

개발자도구 에서 Layer 확인하기

 

개발자 도구 > 우측 상단 더보기 (점3개 아이콘) > More tools(도구 더보기) > Layer

 

그렇다면 성능과 메모리 두마리 토끼를 모두 잡을 순 없을까요?

- will-change 속성 사용하기

https://developer.mozilla.org/ko/docs/Web/CSS/will-change

active 이벤트에 will-change를 사용하여 이벤트를 최적화하기

 

 

 

 

- css contain

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

Reference
https://www.youtube.com/watch?v=TZz9VHjJzMk&t=517s