JS엔진, web API, 이벤트 루프, 태스크 큐

자바스크립트 엔진

• Heap과 Call Stack을 가지고 있다.

• Call Stack
• 원시타입이 들어있다.
• [변수 = 주소, 값] 형태
• 함수 호출 시, 실행 컨텍스트가 생성되고 이를 저장하는 자료구조
• 호출될 때마다 스택에 쌓이고, 함수가 종료될 때 pop한다
• stack이므로 마지막에 호출된 함수를 먼저 처리
• 비어있다면, 즉 script가 끝나면, 이벤트 루프가 태스크 큐에 있는 콜백함수를 처리한다.

• Heap
• 객체들이 할당되는 메모리
• 크기가 동적으로 변하는 값들의 참조 값을 갖고 있다.

• 배열은, 힙 영역에서는 배열 주소와 배열 값들이, 콜 스택의 값으로 힙 영역에 있는 주소가 들어감
⇒ 따라서 배열을 const 상수로 할당했다고 해도 push 등으로 조작 가능한 것이다!!

Web(Browser) API

• 웹 브라우저에 구현된 API

• DOM event, AJAX, Timer 등이 있다.

이벤트 루프

• 자바스크립트는 싱글 스레드 기반의 언어지만, 자바스크립트가 구동되는 환경(Node.js, 브라우저)은 여러 스레드가 사용됨

• 이벤트 루프: 이 여러 스레드가 사용되는 구동 환경이 자바스크립트 엔진과 연동하기 위해 사용되는 장치

• 스레드 안에 있는 코드들을 스케쥴링하고 실행시키는 역할을 한다

• 웹이나 앱의 코드는 메인 스레드에서 실행되며, 같은 이벤트 루프를 공유

• [종류]
1. window event loop
: 같은 origin인 모든 윈도우는 윈도우 이벤트 루프를 공유하여 윈도우들끼리 동기적으로 소통 가능
2. worker event loop
: 1과는 독립적으로 실행
3. worklet event loop

• 하나 이상의 태스크 큐를 갖는다.
• 가져올 때 “실행 가능한” 첫번째 태스크(가장 오래된 태스크)를 가져온다.

• 동작 과정
1. 매크로 태스크 큐에서 가장 오래된 태스크 를 꺼내서 실행시킨다.
2. 마이크로 태스크 큐에 있는 모든 태스크를 실행시킨다.
3. 렌더링 작업을 실행한다.
4. 매크로 태스크 큐에 새로운 매크로 태스크가 나타날 때까지 대기한다.
5. 태스크가 나타나면 1~4 반복
 

테스크 큐

• 매크로 태스크 : 태스크 큐에 있는 것을 실행시키기 시작할 때 있는 매크로 태스크만 실행, 다음 이벤트 루프가 실행될 때까지 실행되지 않는다.
• 이벤트 루프의 동작 방식
• I/O
• UI rendering
• setTimeout

• 마이크로 태스크 : 실행하면서 새로운 마이크로 태스크를 큐에 추가할 수도 있다. 새롭게 추가된 마이크로 태스크도 큐가 빌 때까지 계속해서 실행된다.
• Promises
 

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
script end
promise1
promise2
setTimeout