💫 window.requestAnimationFrame()

1. 정의

브라우저에게 수행하기를 원하는 애니메이션을 알리고 다음 리페인트가 진행되기 전에 해당 애니메이션을 업데이트하는 함수를 호출하게 합니다. 이 메소드는 리페인트 이전에 실행할 콜백을 인자로 받습니다.

참고 노트: 다음 리페인트에서 그 다음 프레임을 애니메이트하려면 콜백 루틴이 반드시 스스로 requestAnimationFrame()을 호출해야합니다. (재귀)

2. 특징

1. 브라우저가 실행시기를 결정한다.
2. 스스로 반복 호출할 수 없다.
   반복하려면 재귀호출 한다.

구동

1. 16.7ms (1/60초) 마다 실행한다. 때에 따라 시간은 바뀔 수 있다.
2. 인자로 받아낸 콜백 함수를 실행한다.
   Render에서 Render Tree 구성 전에 실행한다.
3. Timestamp를 인자로 넘긴다.
   Timestamp: performance.now()와 유사한 밀리초 단위의 시간 값을 의미

3. Javascript 렌더에서 이벤트 루프 순서

requestAnimationFrame > RenderTree > Layout > Paint

• requestAnimationFrame의 모든 callback 함수를 차근차근 실행시킨 후 다음 단계로 진행한다.
• 랜더 단계는 약 16.7ms (1/60초) 마다 실행된다. 콜스택의 함수 실행 시간이 길면, 실행 시간이 늦어질 수 있다.

---

출처
MDN - window.requestAnimationFrame