[Javascript] 엔진 구조와 동작 방식

자바스크립트 엔진의 구조

• Heap : 메모리 할당을 담당
• Stack : 1개의 stack = single Thread = 동기적 실행, 호출된 시점에 Stack 이 쌓인다. 실제 업무 수행 담당
• Web API : 비동기적 task를 수행하는 곳, 비동기적 task 예시) setTimeout, AJAX, 이벤트리스터, Promise.then
• Callback Queue : 비동기 task 다 끝나면 들어가는 곳, microtask Q > animation Frame Q > task Q(event Q) 세가지의 Q가 내부에 존재하고, 순서대로 우선순위를 갖는다.
• Event Loop : Stack 의 상태를 계속 주시하다가, 비어있는 순간 콜백큐의 task를 stack으로 집어넣어준다.

[실행 코드 예시]

console.log("A");

setTimeout(function(){
	console.log("setTimeout")
}, 0);

Promise.resolve()
	.then(function() {
    console.log("Promise");
   }
);

// 엄청 오래걸리는 작업이라고 가정
console.log("B");

 

1. 먼저 동기적 작업이 Stack에 쌓이고, 바로 실행된다.

 

2. setTimeout이라는 비동기 작업은 WebAPI 에서 수행이 된다.

 

3. 다음 비동기 작업인 Promise.then이 WebAPI 로 가서 수행된다.

 

4. 다음 동기 작업인 console.log("B") 가 Stack 에 쌓이고 바로 실행된다 (여기서 이 동기작업은 매우 오래걸리는 작업으로 가정했다: 계속 실행되고 있는 중임)

 

5.  비동기작업 중에 setTimeout이 먼저 끝났다고 가정했다. setTimeout 은 콜백 큐에서 가장 우선순위가 낮은 Task Queue로 들어간다. (JS자체에서 정해놓은 룰임)

 

6. 다음으로 끝난 Promise.then 이 콜백큐에서 가장 순위가 높은 microtask queue로 들어간다. (이 역시 JS 자체의 룰)

 

7.  드디어 동기작업인 console.log("B") 가 끝났다. console("B") 가 끝나지 않으면 콜백큐에 대기중인 작업들은 수행될 수 없다.

 

8. 비동기 작업들 중에 setTimeout이 먼저 끝났지만, 우선순위에 의해 Promise가 먼저 stack으로 올라간다. (이벤트 루프가 올린다), 바로 실행된다.

 

9. stack이 비면, 이벤트루프가 마지막 setTimeout 을 stack으로 올리고, 실행된다.