최근 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가 따로 있어서 그 큐에 있는 콜백을 실행시킨다.
만약 큐에 콜백들이 엄~~~~청 많다면 어떻게 되는가?
실행을 보장하기 위해 큐에서 콜백들을 임의로 제거시킨다. 큐에 얼마나 많은 콜백들이 담길 수 있는지는 디바이스마다 다르다.
'공부' 카테고리의 다른 글
Next.js 13 마이그레이션 소감 및 아쉬운 점 (0) | 2022.11.22 |
---|---|
브라우저는 html을 다 받았는지 어떻게 알고 렌더링 할까 (0) | 2022.09.28 |
[Next.js] 브라우저 뒤로가기 막기 beforePopState 문제점 (1) | 2022.09.20 |
Edge Side Rendering (SSR vs CSR vs ESR) (1) | 2022.09.09 |
[next.js] useRouter vs Router 차이 (0) | 2022.09.09 |