requestAnimationFrame 정리

최근 requestAnimationFrame이라는 브라우저 API를 많이 사용하고 있다.

 

크롬에서 웹을 개발할 때는 렌더링 성능이 좋기 때문에 그냥 css의 translate를 사용하면 웬만한 요구사항은 해결할 수 있지만

 

웹뷰에서는 성능이 좋지 않기 때문에 평범한 css의 translate도 굉장히 버벅이게 된다.

 

특히 translate 되는 Element가 화면에서 클수록 사용자 체감은 크다.

 

보통 프론트엔드를 처음 배울 때 javascript 보다 css를 이용해 구현하는 것이 성능적으로 좋다고 배웠는데

 

꼭 그런 것은 아닌 것 같다.

 

css의 최대 단점은 기기의 성능에 영향을 많이 받기 때문에

 

디바이스, 브라우저 상관없이 균일한 사용자 경험을 위해서라면 번거롭더라도 javascript를 이용하는 것이 사용자 경험에선 더 좋은 선택인 것 같다.

 

 

requestAnimationFrame(callback)은 프레임 단위로 콜백 실행을 보장하는 api 이다.

 

일반적으로 주기마다 반복적으로 콜백을 실행하는 setInterval과 비슷하지만 아주 아주 중요한 차이들이 있다.

 

 

setInterval과의 차이?

 

setInterval은 사용자가 실행 간격(interval)을 지정할 수 있지만

 

requestAnimationFrame은 사용자가 임의로 지정할 수 없다.

 

그렇다고 정해진 간격도 없는데 이유는 모니터 주파수에 따라 간격이 달라진다.

 

보통 60hz 모니터라면 1초에 60번, 즉 16.6ms마다 콜백을 1회 실행시킨다.

 

 

어떻게 실행을 보장하는가?

 

프레임이 업데이트 되기 전에 animationFrameQueue가 따로 있어서 그 큐에 있는 콜백을 실행시킨다.

 

 

만약 큐에 콜백들이 엄~~~~청 많다면 어떻게 되는가?

 

실행을 보장하기 위해 큐에서 콜백들을 임의로 제거시킨다. 큐에 얼마나 많은 콜백들이 담길 수 있는지는 디바이스마다 다르다.