자바스크립트 엔진 동작 원리

JavaScript Visualized - Event Loop, Web APIs, (Micro)task Queue

자바스크립트 런타임 구성요소

콜 스택(Call Stack)

• 함수가 호출되었을 떄 생성되는 실행 컨텍스트들이 여기에 push 된다.
• FILO(First-In-Last-Out) 방식으로 처리
• 함수의 실행이 종료되면 컨텍스트가 pop 된다.
• 자바스크립트는 싱글 쓰레드(Single Thread)의 형태로 단 하나의 콜스택을 가지기 때문에 굉장히 많은 시간을 잡아먹는 작업이 있을 경우, 프로그램 작동이 막힐 수가 있다.

  function longRunnigTask() {
  	let count = 0;
  	for (let j = 0; j < 1e9; j++) {
  		count++;
  	}
  	console.log("Long task done!");
  }
  
  function importantTask() {
  	console.log("Important!");
  }
  
  longRunningTask();
  importantTask();

  콜 스택은 longRunningTask 함수가 끝날 때까지 importantTask 함수를 실행할 수 없기 때문에, 중요한 작업이 오랫동안 미뤄질 수가 있다. 이런 긴 실행 작업이 필요할 때, 프로그램의 진행이 멈추지 않도록 Javascript 에서는 web APIs를 통해 일부 기능을 제공한다.
  

Web APIs

• 브라우저가 활용하는 기능과 상호작용할 수 있는 인터페이스 세트를 제공한다.

• 여기에는 자주 사용하는 Document Object Model, fetch, setTimeout 등이 포함된다.

• 자바스크립트 런타임과 브라우저 기능 간의 다리 역할을 한다.

• 비동기 작업이 시작되면 이를 Web APIs로 전달하고, 콜 스택의 해당 실행 컨텍스트는 제거된다.

• 여기서 비동기 작업은 callback 형태와 promise 형태로 나누어진다.

모든 Web APIs가 비동기 작업을 다루는 것은 아니다.

• Callback-based APIs
  • 위의 getCurrentPosition 메서드의 경우, API가 원하는 값을 받았을 때의 success callback과 받지 못했을 때의 error callback으로 이루어져있다.
  • 해당 메서드를 호출하면 실행 컨텍스트가 콜 스택에 추가되고, 이 컨텍스트는 콜백을 웹 API에 등록하고 브라우저에 작업을 넘기는 역할을 한 후 종료된다.
  • 브라우저에서 사용자가 상호작용하는 동안에도 콜 스택은 이와 상관없이 다른 작업을 할 수 있다.(non-blocking task)
  • web APIs의 상호작용이 종료된 후에 callback은 콜 스택이 아닌 Task Queue에 추가된다.
• Promise-based APIs
  • 콜백 함수가 아닌, promise를 리턴하는 API 작업들이 해당한다.
  • 이 작업들은 Task Queue가 아닌 Microtask Queue에 추가된다.

태스크 큐(Task Queue)

• Web API의 콜백 또는 이벤트 핸들러가 실행 대기하게 되는 저장소이다.
• FIFO(First-In-First-Out)

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

• then(callback), catch(callback), finally(callback)같은 프로미스 핸들러의 콜백 함수
• async 함수 내의 await뒤 따라오는 작업
• MutationObserver 콜백 함수
• queueMicrotask 콜백 함수
• 태스크 큐보다 높은 우선 순위를 가짐
• FIFO(First-In-First-Out)

이벤트 루프(Event Loop)

1. 콜 스택이 빌 떄까지 지속적으로 확인한다.
2. 만약 콜 스택에서 실행 중인 작업이 없다면 마이크로 태스크 큐의 작업을 최우선으로 찾는다.
   1. 마이크로 태스크 큐의 작업이 있을 경우, 가장 먼저 들어온 첫번째 작업을 실행한다.
   2. 마이크로 태스크 큐에 작업이 없을 경우, 태스크 큐의 첫번째 작업을 실행한다.
3. 콜 스택이 빌 때마다 계속해서 반복한다.

[javascript-questions/ko-KR/README-ko_KR.md at master · lydiahallie/javascript-questions]