비동기 함수처리를 이해하기 위한 브라우저의 Javascript Callstack, EventLoop, Callback(Task) Queue 구조

브라우저에서 비동기 처리가 필요한 이유: Single Thread구조인 Javascript는 하나의 작업이 오래걸리는 경우 Signle Thread Blocking 이슈가 발생하게 되어 Freezing 현상을 초래할 수 있음. 이 한계를 보완하기 위해 Background로 비동기 작업을 처리하고 Main Thread의 일반적인 동작은 blocking되지 않도록 처리한다.

 

브라우저의 구조는 크게 아래와 같이 구성되어 있다.

 

 

1. Javascript엔진

1-1. Call Stack : 함수가 호출될 시 실행 컨텍스트가 순차적으로 push되고 순차적으로 실행

1-2. Heap : 객체가 할당되는 메모리 공간

 

2. Web API

- Background에서 처리

- DOM Event, ajax, timer 등의 브라우저에 구현되어 있는 API

 

3. Event Loop

- Callstack과 Callback(Task) Queue 사이에서 Callstack의 상태를 관찰하여 비동기 처리가 완료되어 실행되어야할 Callback을 Callstack으로 적절한 시점에 이동 시켜주는 역할을 한다.

- Callstack이 비어있는 경우 Callback(Task) Queue에 있는 다음 순번의 runnable한 callback을 Callstack에 push한다.

 

4. Callback(Task) Queue

- *callback 함수 : 비동기 작업이 완료되었을 때 Main Thread에서 실행되어야 할 함수

- Web API에서 비동기로 수행된 후 실행될 callback 함수(event handler)가 저장되는 곳

- Microtask의 처리 우선순위가 더 높다.

4-1. Microtask Queue : Promise

4-2. Task Queue : setTimeout, setInterval, ...

 

 

 

console.log('script start'); // A

setTimeout(function () { // B
  console.log('setTimeout');
}, 0);

Promise.resolve() 
  .then(function () { // C
    console.log('promise1');
  })
  .then(function () { // D
    console.log('promise2');
  });

console.log('script end'); // E

//출력결과//
script start	//callstack1
script end	//callstack2
promise1	//microtask queue 1
promise2	//microtask queue 2
setTimeout	//task queue