Task Queue, Microtask Queue

 

 

 

 

1. 동기 코드 (Synchronous Code)

동기 코드는 즉시 실행되고, 완료될 때까지 다음 코드로 진행하지 않습니다.

console.log('동기 코드 1');
console.log('동기 코드 2');

 

 

 

 

2. 태스크 큐 (Task Queue)

태스크 큐는 setTimeout, setInterval과 같은 비동기 작업의 콜백을 보관합니다. 이 콜백들은 호출 스택이 비어있고 마이크로태스크 큐가 비어있을 때 실행됩니다.

console.log('동기 코드 1');

setTimeout(() => {
  console.log('태스크 큐');
}, 0);

console.log('동기 코드 2');

 

 

 

 

3. 마이크로태스크 큐 (Microtask Queue)

마이크로태스크 큐는 Promise의 then 핸들러, MutationObserver 콜백 등을 보관합니다. 마이크로태스크 큐는 호출 스택이 비어있을 때 실행되며, 실행된 후에야 태스크 큐로 넘어갑니다.

console.log('동기 코드 1');

Promise.resolve().then(() => {
  console.log('마이크로태스크 큐');
});

console.log('동기 코드 2');

 

 

 

 

위의 예시들을 합쳐서 보면, 실행 순서와 브라우저 렌더링 타이밍을 더 명확히 이해할 수 있습니다.

console.log('동기 코드 1');

setTimeout(() => {
  console.log('태스크 큐');
}, 0);

Promise.resolve().then(() => {
  console.log('마이크로태스크 큐');
});

console.log('동기 코드 2');

실행 순서

동기 코드 1 출력
동기 코드 2 출력
마이크로태스크 큐 실행 (Promise의 then 핸들러)
렌더링 (화면 업데이트)
태스크 큐 실행 (setTimeout 콜백)

 

 

 

자세한 실행 과정

동기 코드 실행:
console.log('동기 코드 1'); 출력
console.log('동기 코드 2'); 출력

마이크로태스크 큐 실행:
Promise.resolve().then() 콜백 실행: console.log('마이크로태스크 큐'); 출력

렌더링:
브라우저는 이 시점에서 DOM 조작, 스타일 변경 등을 반영하여 화면을 업데이트합니다. (렌더링)

태스크 큐 실행:
setTimeout 콜백 실행: console.log('태스크 큐'); 출력

 

 

 

 

 

렌더링이 발생하는 타이밍

렌더링은 모든 동기 코드와 마이크로태스크 큐의 작업이 완료된 후, 그리고 태스크 큐의 작업이 시작되기 전에 발생합니다.
일반적으로 이벤트 루프가 한 번 돌 때마다 렌더링을 한 번 수행하는데, 이는 각 프레임 사이에 발생하며, 60fps 기준으로 약 16.6ms 주기로 일어납니다.

 

 

요약

동기 코드: 즉시 실행
마이크로태스크 큐: 동기 코드가 완료된 후 즉시 실행
렌더링: 동기 코드와 마이크로태스크 큐가 완료된 후, 태스크 큐가 실행되기 전에 발생
태스크 큐: 마이크로태스크 큐와 렌더링이 완료된 후 실행