requestAnimationFrame()은 브라우저의 화면 갱신 주기에 맞춰 콜백 함수를 실행하도록 요청하는 API
이를 통해 애니메이션을 보다 부드럽게 렌더링하고 성능 최적화 할 수 있음
목적은 애니메이션을 위한 프레임 렌더링을 브라우저의 화면 갱신 속도에 맞추는 것
브라우저는 화면의 프레임을 1초당 60번 or 120번(120fps) 갱신하는 것이 일반적, 이러한 갱신 주기에 맞춰 콜백을 실행해줌
이를 통해 브라우저가 최적의 시점에 프레임을 렌더링하도록 보장하여 부드러운 사용자 경험 제공하고, 불필요한 연산 줄일 수 있음
const animate = () => {
/* 애니메이션을 위한 동작 */
if (일정시간이지나면) {
return;
}
requestAnimationFrame(animate)
}
requestAnimationFrame(animate)
setTimeout(), setInterval()을 사용해도 일정한 간격으로 함수를 실행할 수는 있어도 브라우저의 화면 갱신 주기와 맞지 않는 경우가 발생함.
그리고 이로 인해 프레임 드롭 및 애니메이션의 끊김 현상이 발생할 수 있음
그래서 requestAnimationFrame()은 화면 갱신 주기에 맞춰 실행되기에 프레임 드롭 없이 애니메이션이 매끄럽게 보이고 성능 측면에서도 유리함
추가적인 장점?
디스플레이의 주사율에 맞게 콜백의 실행 주기가 동적으로 조정됨
여러 주사율의 디스플레이에서 최적의 타이밍을 찾아 실행됨
더불어, 백그라운드 탭이나 hidden상태일 땐 실행을 중지한다는 장점
이는 사용자의 배터리 수명과 시스템 리소스 절약에 도움이 됨
콜백은 태스트 큐에서 관리?
requestAnimationFrame콜백은 태스크 큐나 마이크로태스크 큐와는 다른 곳에서 관리 됨
map of animation frame callbacks 라 불리는 map형태의 자료구조에서 별도로 관리되며 독자적인 실행 주기를 가짐
