CSS 애니메이션 최적화
애니메이션 최적화는 왜 필요할까?
애니메이션을 구현하다보면 jank현상(스크롤 떨림, 지연, 끊김 등)이 나타난다.
이를 해결하기 위해 애니메이션 최적화가 필요하다.
애니메이션 최적화는 웹 사이트의 성능을 향상시킬 수 있고, 시스템을 절약하여 좋은 사용자 경험을 제공할 수 있다.
웹 브라우저의 랜더링 순서
웹 브라우저의 랜더링은 위와 같은 순서로 진행된다.
이 중에서 자세히 알아야 둬야 하는 부분은 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블로그
CSS 애니메이션 성능 개선 방법(reflow 최소화, will-change 사용)
wit.nts-corp.com