CSS 애니메이션 성능 최적화하기

애니메이션 공부하면서 알게된 내용 정리

 

출처 : https://developers.google.com/web/fundamentals/performance/rendering/

웹 브라우저는 위의 이미지와 같은 로딩, 렌더링 순서를 거친다.

 

이 중 Layout, Paint, Composite 단계에 주목하자

 

3. Layout

브라우저에서 엘리먼트의 도형, 위치를 생성한다.

대표적인 속성값으로 width, height, margin, padding, left,top,rigth,bottom 등이 있다

 

4. Paint

각 엘리멘트의 픽셀을 채운다.

box-shadow, border-radius, color, background-color 등이 있다.

 

5. Composite

화면에 모든 레이어를 그리기 시작한다.

transform, opacity 가 있다.

 

여기서 만약 width, height 등의 값 (Layout 에 해당하는 속성 값)을 애니메이션으로 변경하게 된다면

Layout -> Paint -> Composite 단계를 다시 거쳐야한다.

이것을 Reflow 라고 한다

 

그럼 background-color 등을 변경하하면 

Paint -> Composite 를 걸치는데

이것을 Repaint 라고 한다

 

즉 애니메이션을 줄거면 최대한 Composite 단계에서 하는게 성능상으로 좋다.

 

참고

Smooth as Butter: Achieving 60 FPS Animations with CSS3

 

렌더링 성능  |  Web  |  Google Developers