브라우저Hard#415
requestAnimationFrame과 requestIdleCallback은 각각 언제 사용하나요?
#브라우저#requestAnimationFrame#requestIdleCallback#성능
답변 포인트
화면 갱신 타이밍에 맞춰야 하는 작업과 남는 시간에 처리해도 되는 작업을 구분해보세요.
정답 및 해설
빠른 요약
두 API는 모두 “언제 작업을 실행할 것인가”를 브라우저 스케줄링에 맡긴다는 공통점이 있지만 목적이 다릅니다. `requestAnimationFrame`은 다음 화면을 그리기 직전에 실행됩니다.
두 API는 모두 “언제 작업을 실행할 것인가”를 브라우저 스케줄링에 맡긴다는 공통점이 있지만 목적이 다릅니다.
requestAnimationFrame은 다음 화면을 그리기 직전에 실행됩니다. 스크롤 위치에 따른 애니메이션, 캔버스 렌더링, DOM 위치 계산 후 transform 적용처럼 프레임과 맞물린 작업에 적합합니다. 보통 60Hz 화면에서는 초당 약 60번 호출될 수 있어, 내부 작업이 무거우면 오히려 프레임 드랍을 만들 수 있습니다.
JavaScript
function tick() {
box.style.transform = `translateX(${performance.now() / 10}px)`;
requestAnimationFrame(tick);
}
requestAnimationFrame(tick);반면 requestIdleCallback은 브라우저가 바쁘지 않은 유휴 시간에 실행됩니다. 로그 전송 준비, 캐시 정리, 우선순위 낮은 데이터 prefetch처럼 지금 당장 화면에 필요하지 않은 작업에 어울립니다.
다만 requestIdleCallback은 브라우저 지원과 실행 보장이 약합니다. 중요한 비즈니스 로직을 여기에만 의존하면 안 되고, timeout이나 fallback을 함께 고려해야 합니다. 정리하면 애니메이션은 rAF, 미뤄도 되는 부가 작업은 idle callback입니다.