애니메이션

렌더링 성능 최적화 - 애니메이션

애니메이션 최적화 (Reflow, Repaint) 쟁크 현상 브라우저는 보통 초당 60프레임으로 렌더링 초당 프레임이 떨어지면 ex) 30,20 -> 쟁크(애니메이션 버벅이는 현상) 발생 브라우저 렌더링 과정 1) DOM + CSSOM Render Tree Layout Paint - 3,4를 통해 여러개의 레이어가 만들어짐 Composite - 각 레이어 합성 1초에 60프레임이기 때문에 약 16.7ms에 한 프레임을 그려내야 함. 재렌더링이 해당 시간안에 완료되지 않으면, 특정 프레임 누락 -> 이전 프레임 보여줌 리플로우 width, height 변경시 레이아웃을 다시 하며 렌더링 과정 실행 리페인트 color 등 변경시 레이아웃 제외하고 렌더링 과정 실행 리플로우, 리페인트 피하기 GPU 도움받기 ..