[JavaScript] requestAnimationFrame: 브라우저 애니메이션 루프

requestAnimationFrame, rAF, 애니메이션 프레임, cancelAnimationFrame

정의

requestAnimationFrame (rAF) 은 브라우저에게 다음 리페인트 직전에 콜백을 실행해달라고 요청합니다. 60Hz 모니터 기준 약 16.67ms 주기.

왜 setTimeout 이 아닌가

• 주사율에 자동 맞춤: 120Hz 화면에서는 8ms 주기, 절전 모드에서는 늦춰짐
• 탭 비활성 시 정지: 백그라운드 탭에서 안 돎, CPU 절약
• 동기화: 브라우저 렌더링 파이프라인과 정렬

기본 사용

let start;

function animate(timestamp) {
    if (!start) start = timestamp;
    const elapsed = timestamp - start;

    ball.style.left = elapsed * 0.1 + 'px';

    if (elapsed < 3000) requestAnimationFrame(animate);
}

requestAnimationFrame(animate);

취소

const handle = requestAnimationFrame(animate);
cancelAnimationFrame(handle);

함정

• CSS 애니메이션이 더 효율적: 순수 transform/opacity 는 CSS 로
• setTimeout 이 필요한 경우: 정확한 인터벌 필요 시 (게임 서버 sync 등)
• 첫 프레임 지연: 첫 rAF 콜백은 다음 프레임까지 대기 (수 ms)

참고

• 관련 setTimeout
• 관련 Event Loop