requestAnimationFrame vs requestIdleCallback

requestAnimationFrame

• requestAnimationFrame, 줄여서 rAF는 브라우저에서 다큐먼트의 스타일, 레이아웃을 새로 계산할 때 마다 (정확히는 바로 직전) 콜백함수를 실행시킨다.

requestIdleCallback

• rAF와 API는 유사하지만 완전히 다른 목적으로 쓰임.

• 브라우저가 idle 상태일 때 콜백을 호출해주기 때문에 애니메이션 등의 작업에 악영향 없이 백그라운드 작업을 수행할 수 있게 해 준다.

• 이 콜백에서 DOM을 변경해선 안 된다. DOM을 변경하고 싶다면 rAF를 사용해야 한다.

• 레이아웃 변경을 일으키지 않는 무한 스크롤 뷰 등에 사용 가능하다.

• React v16까지의 내부의 업데이트 큐가 rIC를 통해 실행된다. (하지만 v17 이후에선 페이스북에서 자체적으로 만든 스케줄러를 사용한다고 한다.)

Related links

• 스택 오버플로우, requestidlecallback vs requestanimationframe

• MSDN requestIdleCallback API

• 두 함수를 포함한 Frame의 lifecycle에 관한 글

• Previous
  useEffect vs useLayoutEffect
• Next
  Redux와 비동기 액션 처리