requestAnimationFrame() 왜 쓰나요?

requestAnimationFrame이란?

자바스크립트에서 기본으로 제공하는 Window 인터페이스의 메소드이다.

왜 사용하나요?

만약 자바스크립트로 애니메이션을 구현할 때 단순히 setTimeout 혹은 setInterval을 사용하여 특정 코드를 반복 실행시키면 여러 문제점이 존재한다.

• 애니메이션을 자연스럽게 만드려면 fps(1초에 몇 개의 프레임이 넘어가는지의 단위)를 신경써야 한다. 사람의 눈은 60fps에서부터 애니메이션을 부드럽다고 느낀다고 한다.
• 이를 위해서는 16.666 밀리세컨드마다 프레임이 바뀌도록 구현해야 한다.
• 하지만 setTimeout이나 setInterval을 통해 코드를 반복 실행시키면 콜백 코드 부분이 프레임 시작 시간에 맞춰 실행됨을 보장하지 못한다. 타이머 함수에서 콜백 함수는 비동기 처리로 태스크 큐에 저장되었다가 콜 스택이 비어야만 실행되기 때문에, 정확히 해당 시간마다 동작한다는 보장이 없다.

requestAnimationFrame 함수는 자바스크립트 코드가 프레임 시작 시간에 맞춰 실행되도록 보장해 준다.

requestAnimationFrame() 함수는 다음 리페인트가 일어나기 바로 전에 브라우저가 지정된 애니메이션 업데이트 함수를 호출하도록 예약한다. 따라서 각 프레임이 정확히 16.6ms 간격으로 렌더링되게 된다.