[js] requestAnimationFrame()의 내부 동작 원리

✅ requestAnimationFrame()의 내부 동작 원리

📌 동작 순서

1. JavaScript가 requestAnimationFrame(callback)을 호출하면,
2. 브라우저는 다음 프레임을 렌더링하기 직전(callback을 큐에 넣기 전) 타이밍에,
3. callback을 실행합니다.

브라우저는 보통 1초에 60번 화면을 그리므로(60fps), 대략 16.67ms마다 한 번씩 callback이 실행됩니다.

브라우저의 렌더링 루프와 동기화되어 DOM 변화나 애니메이션을 가장 자연스럽고 효율적으로 처리할 수 있게 합니다.

---

🧠 언제 실행되는가?

• 화면이 활성 상태일 때만 실행됨
  → 탭이 비활성화되면 일시 중지됨 → CPU 낭비 X
• 프레임 스케줄에 따라 자동으로 실행 타이밍이 조절됨 → setTimeout보다 정확한 타이밍

---

🧪 간단한 실험

js

 

const id = requestAnimationFrame(myCallback);

// 필요 시 취소
cancelAnimationFrame(id);

• timestamp: 현재 프레임의 시작 시간 (ms)
• 이 루프는 화면이 활성 상태일 때만 반복됨