requestAnimationFrame()1 [Javascript] requestAnimationFrame(애니메이션 최적화하기) 애니메이션을 그리기 위해서는 함수를 반복 호출하며 화면을 다시 그려야 한다. 이를 위해 쉽게 생각해볼 수 있는 방법은 setTimeout 또는 setInterval과 같은 스케줄링 함수를 사용하는 것이다. setTimeout과 setInterval의 한계 그러나 이 함수들은 완벽한 애니메이션을 그리기엔 한계가 있다. 일반적인 모니터의 가변 주사율이 60프레임을 고려해, 1초에 60번의 호출이 발생하도록 delay를 1000/60ms로 준다고 가정하자. 보통의 경우는 이 delay가 잘 지켜져 의도한 대로 60 프레임의 애니메이션이 그려질 것이다. 그런데 만약 연산에 delay 이상의 시간이 필요한 경우는 어떨까? 싱글 스레드인 자바스크립트의 특성상, 주어진 delay 시간을 지키지 못하고 일부 애니메이션.. 2022. 4. 25. 이전 1 다음