브라우저 런타임 환경의 이해(5) - Javascript의 requestAnimationFrame


  • Javascript의 requestAnimationFrame가 동작하는 방법에 대해서 공부하고 정리한 내용입니다.

  • 아래 코드에서 버튼을 클릭하게 되면 콜백 함수가 실행되는데, 이 콜백 함수에서는 requestAnimationFrame이라는 API를 호출하게 된다

  • 이 API는 우리가 등록한 콜백 함수가 나중에 브라우저에서 다음 렌더링이 발생하기 전에 이 콜백이 수행되는 것을 보장해준다

<body>
  <button>Click</button>
  <script>
    const button = document.querySelector('button');
    button.addEventListener('click', () => {
      requestAnimationFrame(() => {
        document.body.style.backgroundColor = 'beige';
      });
      requestAnimationFrame(() => {
        document.body.style.backgroundColor = 'blue';
      });
      requestAnimationFrame(() => {
        document.body.style.backgroundColor = 'red';
      });
    });
  </script>
</body>

  • 버튼을 클릭하면 태스크 큐로 콜백 함수가 들어가게 되고, 이벤트 루프는 콜 스택으로 해당 콜백 함수를 가져와서 실행한다.

  • 그리고 각각의 requestAnimationFrame이라는 API를 호출하게 되면, requestAnimationFrame 큐 안에 requestAnimationFrame API를 호출하면서 등록한 콜백 함수를 순서대로 등록하게 된다.

  • 이벤트 루프가 콜 스택의 모든 작업을 끝내고 Render을 하게 되면 requestAnimationFrame 큐로 이동을 하게 되고 해당 큐에 있는 콜백 함수를 실행하게 되는데, 큐는 FIFO(First In First Out)의 구조를 가지기 때문에 마지막으로 실행하는 red가 배경색으로 적용된 다음 Render Tree로 넘어가게 된다

  • 따라서 배경색을 바꾸는 코드가 아무리 많이 있더라도 최종적으로 적용되는 색깔이 배경색으로 적용이 된다

  • requestAnimationFrame 은 굉장히 많이 사용되는데

  • requestAnimationFrame 은 클릭 이벤트가 수행될 때는 코드를 변경하지 않고, 나중에 브라우저가 화면을 업데이트 하기 전에 수행하고자 하는 코드가 있을 때 사용한다

  • 지금 클릭이 발생한 시점에는 코드를 실행하지 않아도 되는데, 나중에 브라우저가 업데이트 되기 전에 이 코드를 수행해야 하는 경우 requestAnimationFrame을 사용한다


Reference









© 2020. by dkmqflx

Powered by dkmqflx