자바스크립트의 싱글 스레드

자바스크립트 엔진은 멀티 스레드로 구동하는 다른 언어와는 달리 싱글 스레드로 구동된다. 이 부분에서 한가지 문제가 발생하는데 setTimeout이나 웹 호출 상황에서 작업이 완성될때까지 Call Stack에 쌓인 일들이 멈춰 버린다.

Web API & Callback Queue

Call Stack에 쌓였다가 실행되어야 하는 비동기 함수는 브라우저에서 제공하는 Web API를 호출하고 Web API가 비동기 함수의 콜백 함수를 Callback Queue에 넣는다.

WebAPI로는 DOM(document), AJAX(XMLHttpRequest), setTimeout이 있다.

console.log('first');

setTimeout(function cb() {
  console.log('third');
}, 5000);

console.log('second');

• 위와 같은 코드가 있으면 아랫줄로부터 Call Stack 이 쌓인다

Call Stack
|log('first') |
|setTimeout.  |
|log('second')|

• 이렇게 쌓인 스택은 LIFO 방식으로 윗줄부터 실행되는데
• first가 출력되고 setTimeout을 만나면 비동기 함수이므로 WebAPI를 호출해 콜백 함수를 Callback Queue에 넣게 된다

Call Stack
|      |
|      |
|      |

• 콜스택이 비어있음을 확인하면 Callback Queue에 넣었던 콜백함수가 Call Stack으로 이동한다
• 이 역할을 하는 것이 Event Loop!
• 이러한 행동이 틱이다!

Callback Queue의 세분화

• Microtask Queue

  스크립트 이후에 바로 일어나는 작업으로 Promise가 해당되는데 다른 task들보다 먼저 실행된다.

• Animation Frames

  수행해야 하는 애니메이션을 알리고 리페인트가 진행되기 전에 업데이트 함수를 호출함

• Task Queue

  그 외에 비동기 작업이 순차적으로 실행되도록 하기 위한 작업 유형
  

Event Loop의 이점

• DOM의 렌더링 또한 하나의 콜백처럼 행동한다.
• 비동기 처리에 대한 개념이 없다면 스택이 비워질때까지 렌더링이 되지 않는 문제가 생긴다.
• 약 16ms 마다 큐에 렌더가 들어가는데 스택을 비워주지 않는다면 원치 않은 상태를 렌더링한다
• 따라서 비동기 처리를 통해 태스크 사이사이 렌더할 수 있는 기회를 준다

정리

1. 스크립트 실행하면서 Call Stack에 작업을 쌓아둠

2. LIFO 형태로 코드 실행

3. 실행중 비동기 함수를 만나게 되면 webAPI를 호출

4. webAPI는 비동기 함수 형태에 따라 각각의 Queue에 작업을 넣어줌

5. Event Loop가 Call Stack을 보고 비어있다면 Microtask, Animation, Task 의 순서로 콜백 함수를 Call Stack에 올리고 처리

   "어쨌든 이벤트 루프는 무엇입니까?"
   MDN Event Loop
   자바스크립트 비동기 처리 과정과 RxJS Scheduler