JavaScript Engine 작동방식

JavaScript Engine 이란?

자바스크립트 엔진은 자바스크립트 코드를 해석하고 실행하는 인터프리터다.

(한 번에 모든 코드를 해석하는 것은 컴파일방식, 한 줄 한 줄 동시통역처럼 해석하는 것은 인터프리트방식)

 

HTML과 CSS를 분석해서 화면을 그려주는 렌더링 엔진(Rendering Engine) 과는 다르다.

자바스크립트를 실행하는 환경(주로 web 또는 node.js)에서 자바스크립트 코드를 해석하여 실행하는 도구다.

 

자바스크립트 엔진은 크게 3가지 분류로 나눌 수 있다.

• Stack
• Heap
• Queue

여기에 추가로 이벤트 루프(Event Loop)가 들어가게 된다.

 

Stack

call stack은 함수(요청)가 호출될 때 마다 요청들을 순차적으로 쌓아두고 처리한다.

자료구조에서의 스택처럼 가장 먼저 들어간 요청은 가장 나중에 빠져나오고, 가장 나중에 들어간 요청은 가장 먼저 빠져나온다. (후입선출)

 

자바스크립트는 한 개의 호출스택만을 사용하기 때문에 하나의 요청이 실행되는 동안에는 다른 작업은 절대 수행될 수 없다.

function foo(a) {
	var b = 3;
    return a + b;
}

function bar(c) {
	var d = 5;
	return foo(c + d);
}

console.log(bar(10));

위 코드를 실행하면

1. bar 함수가 스택에 push 된다.
2. bar 함수가 실행되고 bar 함수가 foo 함수를 호출하면서 foo 함수가 스택에 push 된다.
3. foo 함수가 실행되고 리턴값을 bar 함수에 반환하면서 foo 함수가 스택에서 pop 된다.
4. foo 함수의 리턴값을 다시 console.log 함수에 반환하면서 bar 함수도 스택에서 pop 된다.
5. 텅 빈 스택

 

Heap

객체(인스턴스)는 heap에 할당된다. (구조화되지 않은 '더미'같은 메모리 영역을 대부분 'heap'이라 표현한다고 한다.)

 

Queue

자바스크립트 런타임 환경은 Queue를 이용해 처리되어야 할 메세지(요청) 리스트를 가지고 있다가 Stack이 비워지면 대기열에 들어온 순서대로 Stack으로 넘겨 실행시킨다.

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

console.log("second");

위 코드는 setTimeout 함수에 딜레이 시간을 0초로 주었지만 그래도 "second"가 먼저 출력된다.

이유는 setTimeout에 인자로 넘긴 익명함수가 비동기로 호출되는 함수기 때문이다.

 

비동기로 호출되는 함수들(콜백 함수 또는 이벤트 핸들러 등)은 Stack에 쌓이지 않고 먼저 Queue에 들어가게 된다. 이 후, 스택이 비워지면 그때야 비로소 실행될 수 있다. 이 때, 스택이 비워졌는지 Queue에 처리해야할 메세지가 있는지 확인하는 역할을 하는것이 Event Loop다.

 

Event Loop

while (queue.waitForMessage()) {
  queue.processNextMessage();
}

MDN에서 Event Loop를 설명하기 위해 만든 위 코드를 보면 Event Loop가 어떻게 작동하는지 대략 알 수 있다.

Queue에 메시지가 들어오길 계속 기다리다가 메시지가 들어오면 순서대로 처리한다. 그리고 Queue가 비게 되면 다시 메시지를 기다린다. 이것이 Event Loop의 역할이고, Queue는 Stack과 반대로 메시지가 들어온 순서대로 일을 수행하고 삭제한다.

 

웹 브라우저에서는 이벤트 리스너를 이용해 언제든지 이벤트가 발생할 때 마다 메시지를 추가할 수 있다. 또한 앞서 말했듯이 CallBack 함수 같은 경우도 메시지로 등록되어 Queue에 들어가게 된다.

Queue는 등록된 순서대로 일을 처리하기 때문에 setTimeout으로 특정시간 딜레이를 준다고 하더라도 앞서 등록된 메시지들이 있다면 그 시간을 보장할 수 없다.

 

 

 

참고 (Reference)

https://asfirstalways.tistory.com/362

[JS] JavaScript의 Event Loop

https://developer.mozilla.org/en-US/docs/Web/JavaScript/EventLoop

Concurrency model and Event Loop