JavaScript의 Event Loop

Javascript 작동 원리에 대해서, Event Loop

Javascript는 싱글스레드 기반으로 동작
Node.js는 이벤트 루프를 기반으로 하는 싱글스레드

자바스크립트가 동작하는 환경과 자바스크립트를 해석하고 실행시키는 엔진에 대해 알아보겠습니다.

 

Javascript Engine ?

Javascript를 해석하는 Javascript Engine과 웹 브라우저에 화면을 그리는 Rendering Engine은 다른것입니다.

Rendering Engine은 HTML과 CSS로 작성된 마크업 관련한 코드들을 콘텐츠로서 웹 페이지에 'rendering'하는 역할을 합니다.

Javascript Engine이란 Javascript로 작성한 코드를 해석하고 실행하는 인터프리터 입니다. 주로 웹 브라우저에서 이용되지만 최근에는 node.js가 등장한 이후로는 server side에선 V8과 같은 엔진이 이용됩니다.

구글에서 개발한 V8을 비롯해 대부분의 자바스크립트 엔진은 크게 다음의 세 영역으로 나뉩니다.
(이후의 설명은 V8을 중심으로 이루어 졌습니다.)

Call Stack, Task Queue(Event queue), Heap, Event Loop

Call Stack

자바스크립트는 단 하나의 호출 스택을 사용합니다. 이러한 특징 때문에 자바스크립트의 함수가 실행되는 방식을 "Run to Completion"라고 합니다. 이는 하나의 함수가 실행되면 이 함수의 실행이 끝날 때까지 다른 어떤 task도 수행되지 않는다는 의미입니다. 요청이 들어올 때마다 해당 요청을 순차적으로 호출 스택에 담아 처리합니다. 메소드가 실행될 때, Call Stack에 새로운 프레임이 생기고(push) 메소드의 실행이 끝나면 해당 프레임은 pop 됩니다.

 

Heap

동적으로 생성된 객체(인스턴스)는 힙에 할당됩니다. 대부분 구조화되지 않는 '더미'같은 메모리 영역을 'Heap'이라 표현합니다.

 

Task Queue(Event Queue)

자바스크립트의 런타임 환경에서는 처리해야하는 Task들을 임시 저장하는 대기 큐(Task Queue)가 존재합니다. 그리고 Call Stack이 비어졌을 때 먼저 대기열에 들어온 순서대로 수행됩니다.

setTimeOut(()=>{
	console.log('first');
}, 0);
console.log('second');

// second
// first

자바스크립트에서 비동기로 호출되는 함수들은 Call Stack에 쌓이지 않고 Task Queue에 enqueue됩니다. 이후 이벤트에 의해 실행되는 함수(핸들러)들이 비동기로 실행됩니다. 자바스크립트 엔진이 아닌 WebAPI 영역에 따로 정의되어 있는 함수들은 비동기로 실행됩니다.

이벤트에 걸려있는 핸들러는 절대 먼저 실행될 수 없습니다.