requestAnimationFrame

❓질문

requestAnimationFrame에 대해서 설명해주세요.

💡 조사하기전 내가 알고 있던 내용

이건 잘 모르겠습니다 아마 기억하기엔 화면 프레임에 맞춰서 함수를 비동기 실행 시켜주는 메소드로 알고 있습니다

🏫 정리한 내용

requestAnimationFrame()은 브라우저의 화면 갱신 주기에 맞춰 콜백 함수를 실행하도록 요청하는 API입니다. 이를 통해 애니메이션을 보다 부드럽게 렌더링하고 성능을 최적화할 수 있습니다.

requestAnimationFrame()의 목적은 애니메이션을 위한 프레임 렌더링을 브라우저의 화면 갱신 속도에 맞추는 것입니다. 브라우저는 화면의 프레임을 1초당 60번(60fps)이나 120번(120fps) 갱신하는 것이 일반적인데, requestAnimationFrame()은 이러한 갱신 주기에 맞춰 콜백을 실행해줍니다. 이를 통해 브라우저가 최적의 시점에 프레임을 렌더링하도록 보장하여 부드러운 사용자 경험을 제공하고, 불필요한 연산을 줄일 수 있습니다.

물론, setTimeout()이나 setInterval()을 사용해도 일정한 간격으로 함수를 실행할 수 있지만, 브라우저의 화면 갱신 주기와 맞지 않는 경우가 발생합니다. 그리고 이로 인해 프레임 드롭 및 애니메이션의 끊김 현상이 발생할 수 있습니다. 반면, requestAnimationFrame()은 화면 갱신 주기에 맞춰 실행되므로 프레임 드롭 없이 애니메이션이 매끄럽게 보여지고, 성능 측면에서도 유리합니다.

이외에도, 디스플레이의 주사율에 맞게 콜백의 실행 주기가 동적으로 조정된다는 장점이 있습니다. 60Hz, 120Hz, 144Hz 등 여러 주사율의 디스플레이에서 최적의 타이밍을 찾아 실행됩니다.
더불어, 백그라운드 탭이나 hidden 상태일 때는 실행을 중지한다는 장점이 있습니다. 이는 사용자의 배터리 수명과 시스템 리소스 절약에 도움이 됩니다.