자바스크립트는 기본적으로 싱글스레드에서 작동한다.
\n그래서 콜스택에 처리할 연산 목록을 쌓아두어 차례차례 실행한다.
\n콜스택에 연산 목록과 별개로 브라우저 API 요청이 있으면,
\n우선순위 queue 에다가 보관해놓고
\n콜스택을 비운 뒤 각 queue 에서 이벤트 루프가 연산들을 가져간다.
\n이 queue 에는 task queue, microtask queue, animation frame 등이 있다.
\nsetInterval 보다 성능이 좋다고 한다.
\n이유는 setInterval 자체가 그리 정확하게 작동하지 않는 것도 있고
\n두번째 인자로 전달하는 interval 값이 사용자가 느끼기엔 어색한 빈도일 수 있기 때문.
\n하지만 requestAnimationFrame 은 브라우저가 현재 디스플레이 환경에 맞춰
\n최적의 빈도로 실행을 한다.
\n디스플레이 환경에 맞춘다는 것은, 모니터가 초당 60프레임으로 움직임을 보여준다면 requestAnimationFrame 도 초당 60프레임으로 작동한다는 것이다.
\n일반적으로 이벤트 루프가 콜스택에 무엇을 채워넣을지 결정할 때, microtask 를 가장 먼저 처리한다고 한다.
\nmicrotask 로는 promise 등이 속한다. setTimeout 같은 건 그냥 task.
\n그 후에는 animation frame 에 속하는 연산을 처리하는데, 이게 바로 rAF 의 첫번재 인자로 전달하는 콜백이다.
\n근데 때로는 task queue 에 있는 작업을 먼저 수행하기도 한다고 하는데
\n이거 때문에 누구 말이 맞나 꽤 혼란스러웠다.
\n결론은 우선순위는 animation frame 이 먼저이지만,
\n앞서 예시를 든 환경이라면 초당 60프레임으로 보여주는 상황을 잘 충족하고 있다면
\n우선순위를 task queue 에게 양보하기도 한다는 것.
\n브라우저가 작동할 때 reflow 후에 repaint 를 하는데
\nrAF 는 reflow 가 아니라 repaint 에 관여를 한다.
\n프로그레스바 같은 것이 채워지는 것도 width 나 height 가 길어진다고 생각해서
\nreflow 라고 생각할 수 있지만, repaint 임을 명심하자.
\nhttps://www.w3.org/TR/animation-timing/#dom-windowanimationtiming-requestanimationframe
\n이 포스팅에서 정리한 것들은 이 레퍼런스 글이 아니라 여기저기서 지식을 주워담은 것을 정리한 것이다.
","frontmatter":{"title":"event loop 와 requestAnimationFrame","date":"October 19, 2021"}}},"pageContext":{"slug":"/21-10-19-event-loop-raf/","previous":{"fields":{"slug":"/21-10-07-context-and-state-management/"},"frontmatter":{"title":"React 에서 Context API 와 상태관리","category":"react","draft":false}},"next":{"fields":{"slug":"/21-10-29-firebase-emulator-test/"},"frontmatter":{"title":"firebase 에뮬레이터로 테스트 코드 작성하기","category":"dev","draft":false}}}}, "staticQueryHashes": ["3128451518","3474900066"]}