Hengxi's 개발 블로그

웹 성능 최적화 방법 2 애니메이션 최적화(Reflow, Repaint) 컴포넌트 Preloading 이미지 Preloading 1. 애니메이션 최적화 (Reflow, Repaint) 애니메이션 원리 연결된 동작을 하는 그림을 빠르게 보여주면 이전 그림이 뇌에서 사라지기 전에 다음 그림을 보면서 연결된 것처럼 받아들이는 원리 일반적인 모니터의 경우에는 1초에 60 FPS(1초에 이미지를 표현할 수 있는 개수)로 이미지를 표할 할 수 있는데, 브라우저도 이에 맞춰 초당 60 FPS으로 렌더링을 하려고 한다. 요즘 좋은 모니터의 경우에는 144 FPS까지 가능하다. 브라우저가 렌더링을 하는 과정에서 특정한 이유를 통해서 한 번의 이미지를 표현할 수 있는 프레임이 작아진다면(30 FPS나 20 FPS가 된다면..