애니메이션 최적화

턴제 게임의 특성상 타이머를 구현해야 했고 처음에는 쟁크현상이 발생하였었다. 이것을 부드럽게하기 위해 작업했을 때 너무 많은 Reflow가 발생하였는데 이런 점을 최적화 할 수 있는 방법에 대해서 알게 되었다.

※ 쟁크 현상 : 초당 60프레임을 그리는 브라우저의 특성과 달리 초당 60프레임이 주어지지 않았을 때, 살짝 끊기는 듯한 화면이 그려지는 현상

Reflow
=> 렌더링 과정이 모두 재실행되는 것
Repaint
=> color, background-color 변경의 경우 layout을 생략하고 paint 작업으로 넘어가는 것
GPU의 도움을 받아 Reflow와 Repaint 피하기
=> tranform, opacity를 변경하게 될 경우 layout과 paint 과정을 모두 생략하고 Composite 단계로 넘어감.

Reflow	Repaint	GPU
position, display, width, float, height, font-family, font-size, top, right, bottom, margin, padding, overflow, text-align 등등 크기나 위치를 조정하는 css 속성들	background 속성, color, line-style, outline, text-decoration, border-radius, border-style, box-shadow 등등 색을 칠해주는 css 속성들	transform, opacity

css를 적용시킬때에도 고민할 것이 많다라는 것을 알게 되었다. 렌더링에서 어떤 부분이 최적화에 가까울지 고민하고 사용해야 될 것 같다. 특히, 애니메이션을 통해 변경을 할때에.

CSS GPU 애니메이션 제대로 하기 | WIT블로그