zero-base/ CSS animation 최적화 기법

CSS 애니메이션 최적화

애니메이션 최적화는 왜 필요할까?

애니메이션을 구현하다보면 jank현상(스크롤 떨림, 지연, 끊김 등)이 나타난다.

이를 해결하기 위해 애니메이션 최적화가 필요하다.

애니메이션 최적화는 웹 사이트의 성능을 향상시킬 수 있고, 시스템을 절약하여 좋은 사용자 경험을 제공할 수 있다.

 

 

웹 브라우저의 랜더링 순서

출처: https://web.dev/rendering-performance/

웹 브라우저의 랜더링은 위와 같은 순서로 진행된다.

이 중에서 자세히 알아야 둬야 하는 부분은 Layout, Paint, Composite이다.

 

1. Layout

브라우저는 각 요소의 크기와 위치를 계산함

- width, height, margin, padding, position, display, float 등

 

2. Paint

브라우저가 요소의 스타일 정보를 이용하여 픽셀을 그리는 작업

- color, background-color, box-shadow 등

 

3. Composite

브라우저가 요소의 스타일 정보와 요소 내용을 이용하여 화면에 표시하는 마지막 단계

- opacity, transform, mix-blend-mode 등

 

* 추가로 알아둬야할 것

Reflow: layout에 해당하는 속성 값을 애니메이션으로 변경하면 layout > paint > composite의 단계를 거치는 것

Repaint: paint에 해당하는 속성 값을 애니메이션으로 변경하면 paint > composite의 단계를 거치는 것

 

애니메이션을 준다면 layout, paint 단계의 것보다 composite단계의 속성을 건드리는것이 성능을 향상 시킬 수 있다.

 

 

참고하면 좋은 내용

https://wit.nts-corp.com/2017/06/05/4571

CSS 애니메이션 성능 개선 방법(reflow 최소화, will-change 사용) | WIT블로그