requestAnimationFrame이 setInterval이나 setTimeout보다 나은 이유

setInterval과 setTimeout을 모두 애니메이션 작업에 사용할 수 있지만 일반적으로 여러 가지 이유로 requestAnimationFrame이 더 나은 선택으로 간주됩니다.

1. 디스플레이 새로 고침 빈도와 동기화

requestAnimationFrame은 콜백을 장치의 디스플레이 새로 고침 빈도(일반적으로 60Hz)와 동기화합니다. 즉, 애니메이션이 일관된 프레임 속도로 업데이트되어 setInterval 또는 setTimeout에서 발생할 수 있는 흔들림과 끊김 현상이 제거됩니다.

2. 리소스 소비 감소

setInterval 및 setTimeout은 브라우저가 적극적으로 렌더링하지 않는 경우에도 지정된 간격으로 콜백을 호출합니다. 이로 인해 불필요한 CPU 사용량과 배터리 소모가 발생할 수 있습니다. 반면 requestAnimationFrame은 브라우저가 새 프레임을 표시하려고 할 때만 콜백을 호출하여 리소스를 절약합니다.

3. 향상된 사용자 경험

requestAnimationFrame으로 구동되는 애니메이션은 setInterval 또는 setTimeout을 사용하는 애니메이션에 비해 더 부드럽고 반응성이 좋습니다. 이는 requestAnimationFrame이 기기의 새로 고침 빈도를 고려하고 애니메이션이 일관되고 시각적으로 만족스러운 속도로 실행되도록 보장하기 때문입니다.

4. 타임스탬프 가용성

requestAnimationFrame은 프레임이 표시되도록 예약된 시간을 나타내는 타임스탬프 매개변수를 콜백에 제공합니다. 이 타임스탬프를 사용하여 이전 프레임 이후 경과된 시간을 계산할 수 있으므로 보다 정확한 애니메이션 제어와 원활한 전환이 가능합니다.

5. 전단 및 깜박임 제거

requestAnimationFrame은 setInterval 또는 setTimeout에서 발생할 수 있는 전단(애니메이션 위치 불일치) 및 깜박임(불완전한 프레임 표시)과 같은 문제를 해결합니다. 이는 현재 프레임이 화면에 완전히 표시될 때만 다음 프레임 렌더링을 예약하기 때문입니다.

요약하자면, requestAnimationFrame은 디스플레이 새로 고침 빈도와의 동기화로 인해 애니메이션 작업에 선호되는 선택입니다. 리소스 소비, 향상된 사용자 경험, 타임스탬프 가용성, 전단 및 깜박임 제거.