rAF를 setInterval의 더 부드러운 버전으로 외운 사람과, 브라우저 렌더링 파이프라인 안에서 콜백이 언제 실행되는지를 그릴 줄 아는 사람을 가른다. 후속 질문은 보통 이벤트 루프 위치·취소 처리·delta time 보정으로 이어진다.
requestAnimationFrame은 브라우저가 다음 화면을 그리기 직전에 콜백을 한 번 실행해주는 API다. 콜백은 디스플레이 갱신 주기에 맞춰 호출되므로 보통 60Hz 화면에서는 약 16.7ms 간격으로 돌아가고, 탭이 백그라운드로 가면 호출 자체가 멈춘다. 반복 애니메이션은 콜백 마지막에 다시 rAF를 호출해 다음 프레임을 예약하는 식으로 잇고, 끊을 때는 반환된 id를 cancelAnimationFrame에 넘긴다. 즉 "지금 그려지는 프레임에 맞춰 한 번만 일을 시키는 슬롯"이라고 보면 된다.
스크롤 인터랙션이 끊겨 보여서 setTimeout/Interval을 rAF로 옮기고 프레임 타임을 측정한 경험이 있다면 측정 방법과 개선 폭으로 답을 연결할 수 있다
Chrome DevTools Performance 패널에서 long task와 dropped frame을 본 적이 있다면 rAF 콜백이 어느 트랙에 찍히는지로 설명을 끌고 갈 수 있다
컴포넌트 언마운트 시 애니메이션이 살아남아 메모리·CPU를 갉아먹은 경험이 있다면 cancelAnimationFrame과 cleanup 설계 이야기로 자연스럽게 이어진다
고주사율 모니터에서 애니메이션이 너무 빠르게 돈 경험이 있다면 timestamp 기반 delta 보정으로 답변을 한 단계 깊게 만들 수 있다
아직 공개된 답변이 없어요. 첫 공개 답변을 남겨보세요.