브라우저 렌더링 최적화(Reflow, Repaint, Composite)

🔑 키워드

렌더링 성능 최적화, 리플로우, 리페인팅, 합성

❓ 렌더링 성능 최적화

웹 사이트의 성능이 예상보다 느리다면 그 이유 중의 하나는 렌더링의 속도 저하일 가능성이 있다.

 

렌더링 속도를 저하시키는 대부분의 경우는 리플로우와 리페인트에 있을 것이다.

 

 

레이아웃과 리플로우

브라우저에서 DOM노드 트리가 생성되고 해당 트리 내 각 노드의 위치 및 크기에 대한 정보를 가지고 어디에 위치해야할 지를 파악하는 시간이 필요하다. 이를 "레이아웃"이라고 하며 이때 요소는 백터 상자로만 표시된다.

 

페인트와 리페인트

페인트는 백터상자를 가져와 레스터화(백터를 픽셀로 교환)하는 작업을 하는 단계이다. 그리고 이렇게 레스터화 된 작업물들을 레이어에 배치한다.

 

합성

이렇게 생성된 레이어들을 합치고 최종적으로 화면에 표시하는 단계이다.

 

리플로우 발생

리플로우가 발생하려면 요소의 `display` 속성이 바뀌거나, DOM 트리에 노드가 추가되거나 요소의 크기 및 위치를 강제 애니메이션화할 때 나타난다.

 

리페인트의 발생

리페인트는 background-color 를 변경하거나, box-shadow 등의 요소의 페인트 속성에만 영향을 줄 때 일어난다.

 

리페인트와 레이어

중요한 것은 리페인트는 오직 변경되는 요소를 포함하는 레이어에 있는 요소들에게만 영향을 준다는 것이다.

그렇기 때문에 필요에 따라서 `will-change`와 `translate3D`속성을 이용하여 요소 자체를 레이어로 승격시킬 수 있다.

(<canvas> 태그가 있나, 스택 컨텍스트로 인해 요소가 기존 레이어 위에 위치하는 경우 자동적으로 레이어가 승격된다)

 

위와 같은 이유 때문에 레이어화를 많이 하면 좋을 것 같지만 그렇지는 않다. 각 레이어는 메모리를 차지하고 있기 대문에 너무 많으면 브라우저의 충돌이 일어날 수 있기 때문이다. 이와 같은 상황을 방지하기 위해서 브라우저는 알아서 레이어를 만들기도하고, 레이어를 없애기도 한다.

 

리플로우 리페인트 비용과 합성

예상할 수 있듯이, 리플로우와 리페인트 모두 비용이 많이 발생하기 때문에 가능한 피할 수 있다면 피하는 것이 좋다.

 

요소가 안정하게 이동하거나 에니메이션되는 것은 합성(Compositing)단계에서 레이어가 모두 준비 된 후 추가되는 `opaicity` 와 `tranform` 이다. 많은 경우에 리플로우와 리페인트를 모두 피하기 위해서 위 두개의 속성을 사용한다. 근데 만약에 튼텐츠를 리렌더 해야할 경우가 필수적으로 발생할 경우 전체 경험에 얼마나 영향을 주는지 고려하고 레이러를 분리하는 것이 도움이 될지를 고려해야한다.

 

렌더링 과정과 영향 그리고 툴

크롬의 레이어탭을 사용하면 어느 부분에서 레이어가 승격되었고, 리플로우 리페인트 합성 등의 작업이 일어난지 그 범위가 어디까지인지 찾아볼 수 있다. 

 

 

🍯  요약

리플로우: 노드가 추가되거나 디스플레이가 바뀌거나 할 때처럼 요소의 위치 및 크기 계산을 다시 해야할 때 발생

리페인트: 노드의 색상 등 해당 노드 페인트 속성에만 영향을 주는 것이 바뀔 때 다시 해야할 때 발생

 

비용이 많이 들 수 있음

 

합성: 레이아웃 레이어 단계에서 생성된 레이어 트리들을 합치는 단계

 

합성 단계에서 요소를 이동시키거나 에니메이션되는 속성들: opacity, tranform

 

레이어를 독자적으로 사용할 수 있게 하는 속성들: translateZ, will-chanage...

 

크롬 레이어 툴에서 해당 과정을 찾아볼 수 있다.

 

 

https://blog.logrocket.com/eliminate-content-repaints-with-the-new-layers-panel-in-chrome-e2c306d4d752/

Eliminate content repaints with the new Layers panel in Chrome - LogRocket Blog

https://web.dev/stick-to-compositor-only-properties-and-manage-layer-count/

Stick to Compositor-Only Properties and Manage Layer Count