[JS] Microtask Queue..? rAF..? 🤔

아직 작성 중인 미흡한 글입니다.. 빠른 시일 내에 수정하겠습니다. 🫠

requestAnimationFrame()에 대해 알아보기 위해...
Event Loop, Task Queue, Micro Task Queue 에서 더 나아가 rAF까지 알아보자.

먼저 이 코드 실행 순서를 맞춰보자

console.log("script start");
setTimeout(function() {
  console.log("setTimeout");
}, 0);
Promise.resolve().then(function() {
  console.log("promise1");
}).then(function() {
  console.log("promise2");
});
requestAnimationFrame(function {
    console.log("requestAnimationFrame");
})
console.log("script end");

실행 순서는 다음과 같다. 맞추지 못했다면 아래 글을 읽어보면서 알아보자.

script start
script end
promise1
promise2
requestAnimationFrame
setTimeout

🪡 JS는 싱글 스레드 기반 & 비동기로 동작?

📌 자바스크립트는 싱글 스레드!

• 자바스크립트는 싱글 스레드 기반 언어로, 기본적으로는 스레드가 하나이기 때문에 동시에 하나의 작업만 처리 가능

하지만 실제로 자바스크립트가 사용되는 환경을 생각해보면 하나의 작업만이 아닌 더 많은 작업들이 동시에 처리되는 것을 확인할 수 있다.

• ex) 애니메이션 효과를 보여주면서 동시에 마우스 입력을 받아 처리
• ex) Node.js 기반의 웹서버에서는 동시에 여러 개의 HTTP 요청을 처리

단일 스레드인 자바스크립트에서도 동시성을 지원할 수 있는 비결에는 이벤트 루프가 존재하여 비동기적인 일 처리를 가능케 하기 때문이다.

📌 그럼 비동기 처리는 누가 담당하나요?

• 자바스크립트 엔진은 이벤트 루프 취급 X
• 자바스크립트의 엔진인 V8의 경우 Call stack을 사용하여 요청이 들어올 때마다 해당 요청을 순차적으로 stack에 담아 처리하는 일 수행

비동기 요청은 자바스크립트 엔진을 구동하는 환경,
즉 브라우저나 NodeJS가 담당한다.

아래 사진에서 그 환경을 확인할 수 있다.

브라우저 환경	Web API

• 비동기 호출을 위해 사용하는 setTimeout 이나 XMLHttpRequest와 같은 함수들은 자바스크립트 엔진이 아닌 Web API 영역에 따로 정의
• 이벤트 루프와 태스크 큐와 같은 장치들도 자바스크립트 엔진 밖에 구현

📁 Event Loop & Task Queue

• 동기적인 Task: Call stack 에 의하여 순차적으로 처리
• 비동기 이벤트: Web API와 Task Queue를 거친 뒤 Call stack 이 비어있을때에만 이벤트 루프에 의해 Call stack 으로 옮겨져 처리됨
  ex) setTimeout

📁 Task Queue & Microtask Queue

비동기적으로 처리되는 Task는 크게 두 가지 종류로 나뉘게 된다.

1. Task Queue: setTimeout(), setInterval(), setImmediate() 등
2. Microtask Queue: Promise의 콜백함수, async/await, process.nextTick, Object.observe, MutationObserver 등

우선 순위는 Microtask Queue > Task Queue

Call stack에서 더 이상 처리할 task가 없을 때 우선순위가 더 높은 Microtask Queue에 있는 비동기 task가 먼저 처리된 이후에, Task Queue에 있는 task가 실행된다.

코드 예시와 그 실행 순서는 다음과 같다.

console.log('Start!');

setTimeout(() => {
	console.log('Timeout!');
}, 0);

Promise.resolve('Promise!').then(res => console.log(res));

console.log('End!');

📁 rAF? Animation Frames?

• rAF(requestAnimationFrame):

시스템이 프레임을 그릴 준비가 되면 애니메이션 프레임을 호출하여 애니메이션 웹페이지를 보다 원활하고 효율적으로 생성할 수 있도록 해준다. 실제 화면이 갱신되어 표시되는 주기에 따라 함수를 호출해주기 때문에 자바스크립트가 프레임 시작 시 실행되도록 보장해주어 밀림 현상을 방지해준다.

1. 백그라운드 동작 중지

• setInterval: 브라우저의 다른 탭 화면을 보거나 브라우저가 최소화되어 있을 때 계속 타이머가 돌아 콜백을 호출하기 때문에 시스템 리소스 낭비 O & 불필요한 전력을 소모 O
• requestAnimationFrame: 페이지가 비활성화 된 상태이면 페이지 화면 그리기 작업도 브라우저에 의해 일시 중지됨으로 CPU 리소스/배터리 낭비 X

2. 디스플레이 주사율에 맞게 호출 횟수
   = setInterval과 requestAnimationFrame의 결정적인 차이점
   = setInterval 에서는 콜백 함수 호출 간격을 시간을 지정해주고 호출 횟수를 설정
   = rAF에서는 모니터의 주사율을 그대로 따르게 되어 최적화 되어 있다는 것이다. 그리고 이러한 특성 때문에 rAF는 스크롤 이벤트 최적화 기법으로도 쓰이기도 한다.

• Animation Frames: 브라우저의 렌더링 엔진이 다음 프레임을 그리기 전에 실행해야 하는 rAF에 등록한 콜백 함수들을 담는 Queue
• 우선순위는 Microtask보다는 낮고, Task보다는 높다.

1. Microtask queue: Promise 객체, Mutation Observer 객체를 처리 (가장 우선순위가 높음)
2. Animation frames - requestAnimationFrame 와 같이 브라우저 렌더링과 관련된 태스크 처리 
3. Task queue: 이벤트 콜백 함수, setTimeout 및 setInterval 비동기 콜백 함수 처리

const rocket = document.querySelector('.rocket');
const value = document.querySelector('.value');
let yPos = 0;
let rafId;

// 콜백 함수
const render = () => {
  yPos += 2; // y 좌표 증가

  rocket.style.transform = `translateY(${-yPos}px)`; // 로켓을 위로 올리기
  value.innerHTML = yPos; // 카운터 표시

  // 만약 로켓 위치가 일정 y좌표값일 경우 requestAnimationFrame 종료
  if (yPos >= 500) {
    cancelAnimationFrame(rafId);
    return;
  }

  rafId = requestAnimationFrame(render); // rAF 반복 호출
}

requestAnimationFrame(render); // 애니메이션 시작