성능 최적화하기 - (3) 애니메이션 최적화

◽ 애니메이션이 왜 버벅일까?

주사율은 초당 60frame이다. 브라우저도 그에 맞춰서 화면을 렌더링하려고 한다.

애니메이션이 버벅이는 이유는 초당 60frame의 화면을 그리지 못하기 때문이다. (=쟁크현상)

 

빨간 부분: 원래 사용자에게 보여져야하는 부분인데 프레임이 누락되어 아직 렌더링되지않았다.

 

 

◽ 화면이 그려지는 과정

DOM + CSSOM > Render Tree > Layout > Paint > *Composite

* Composite: 각 레이어를 합성하는 과정이다.

 

만약 완성된 화면에서 일부 스타일이 바뀐다면 브라우저는 화면을 이 과정을 다시 거친다.

이를 Reflow라고 하는데 비용이 많이 드는 Layout, Paint 과정을 건너뛰어야 성능이 좋아진다.

- width나 height를 변경하는 경우: Reflow (5단계를 모두 재실행)

- color, background-color를 변경하는 경우: Repaint (Layout 단계를 제외한 4단계를 재실행)

 

 

 

◽ Reflow와 Repaint를 일으키는 속성

Reflow: position, width, heigth, left, top, right, bottom, margin, padding, border, border-width, display, flaot, font-family, font-size, font-weight, line-height, overflow, text-align, vertical-align ...

 

Repaint: background, background-image, background-position. background-repeat, background-size, border-radius, border-style, box-shadow, color, line-style, text-decoration, outline, outline-color ...

 

 

 

◽ 애니메이션 최적화

GPU의 도움을 받는 것으로, GPU가 관여할 수 있는 속성인 transform, opacity 속성을 사용한다.

Layout, Paint 과정을 생략(=Reflow와 Repaint를 생략)한다.

 

[transform 속성]

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

 

전, 후

 

 

 

---

 

 

출처

프론트엔드 개발자를 위한, 실전 웹 성능 최적화(feat. React) - Part. 1 - 인프런 | 강의