< setTimeout 대신 requestAn | 커리어리

< setTimeout 대신 requestAnimationFrame을 사용하라 > Event Loop하면 가장 유명한 Philip Roberts의 6년전 유튜브 영상이 떠오르는데요, 너무 흔해서 색다른 정보를 얻고 싶어 조금 더 최근 발표를 찾게 되었습니다. 제가 본 유튜브 영상은 썸네일에 보이다싶이 좀 더 추상화된 그림을 가지고 설명합니다. 개인적으로 이벤트 루프 동작 원리는 Philip Roberts의 설명이 더 직관적이라 느껴졌고 예시는 Jake Archibald가 좀 더 흔하게 개발자가 겪을 만한 사례를 보여주지 않았는가 생각이 듭니다. 영상 내용 중에 setTimeout을 왜 렌더링과 관련된 작업으로 쓰면 안 되는 지 그리고 requestAnimationFrame에 대해 잘 설명해 놓은 부분이 있어서 소개하겠습니다. setTimeout은 렌더링과 무관한 작업이기 때문에 한 프레임에 동작을 정확히 할 것임을 보장하지 못합니다. px단위로 도형을 무한히 움직이는 애니메이션을 만들고자 할 때, setTimeout을 0초(하지만 브라우저에서 기본값으로 설정한 4.7밀리초로 실행)마다 재귀적으로 호출하는 방법을 쓴다고 합시다. 무한루프에 빠져 상호작용을 아예 막아버리는 일은 없겠지만, 프레임마다 다른 작업이 들쑥날쑥하게 큐가 될 수 있는 상황 속에서 setTimeout의 처리 타이밍은 달라질 가능성이 높습니다. 실제 디스플레이 업데이트는 1초에 60번으로 설정되어있고 이보다 빨리 렌더링 관련 작업을 처리한다고 해서 달라지지 않습니다. 저렇게 0초로 지정한 setTimeout을 쓰면 그만큼 불필요한 작업을 한 프레임 안에서 중복 실행하게 됩니다. 밀리초를 프레임에 맞게 계산했더라도 애니메이션 전용이 아니라서 초 계산이 부정확합니다. 이 까닭에 특정 프레임에는 콜백처리를 하지 못하고 다른 프레임에서 두 번 실행하여 드리프트 현상이 나타날 수 있습니다. 또, 작업 처리가 길어지면 다른 프레임까지 영역을 침범해서 렌더링을 늦출 수 있습니다. 반면 requestAnimationFrame은 일정한 간격으로 프레임 당 정확히 호출함을 보장합니다. requestAnimationFrame은 스타일 계산과 레이아웃 같은 렌더링 이전에 실행되며 작업이 길어져도 프레임 안에서 실행됩니다. 영상에서는 timer나 네트워크 관련된 게 있으면 requestAnimationFrame을 써서 작업을 배치화하라고 합니다.

Jake Archibald: In The Loop - JSConf.Asia

YouTube

2021년 8월 22일 오전 9:02

댓글 0

주간 인기 TOP 10

지난주 커리어리에서 인기 있던 게시물이에요!

현직자들의 '진짜 인사이트'가 담긴 업계 주요 소식을 받아보세요.

커리어리 | 일잘러들의 커리어 SNS