Event Loop

Javascript는 run code, event collecting & processing, Queue의 하위 작업들을 담당하는 event loop에 기반한 동시성(concurrency)모델을 가지고 있다.

 

Javascript Engine

javascript 엔진은 javascript코드를 해석하고 실행하는 프로그램 또는 interpreter이다.

Chrome과 nodejs환경에서 사용하는 V8 Engine, Safari에서 사용하는 Webkit 등 다양한 엔진이 있다.

 

V8엔진을 예로들어 보자

V8 엔진 구조

JS Engine은 Memory heap과 Call Stack으로 구분이 된다.

Heap : memory할당(변수, Object 등 할당)이 일어나는 부분이다. 구조화 되지 않는 넓은 메모리 영역을 지칭한다.

Call Stack

 - 실행될 코드가 한줄 단위로 쌓이는 Stack (LIFO 형태)

 - 코드 실행 시 Call Stack에 해당 코드가 입력(in)된다.

 - 코드 반환 시 Call Stack에서 가장 마지막으로 입력된 코드가 먼저 출력(out)된다.

Web API

 - 비동기 처리를 담당 하는 부분

Call back Queue

 - 비동기 처리가 끝난 후 실행되어야 할 Call back 함수가 차례로 할당

 - Task Queue라고도 한다.

Event Loop

 - Queue에 할당된 함수를 순서대로 Call Stack에 할당

 - Call Stack과 Call back Queue를 계속 바라보고 있으며, Call Stack이 비어 있으면, 먼저 들어온 순서대로(FIFO) Callback Queue에 있는 Call back함수들을 Call Stack으로 집어넣음.

 

아래의 예시 코드가 있다. 0s ~ 3s를 출력하는 비동기 프로그램이다.

export function EventLoop(){
    setTimeout(() => {
        console.log("2s")
    }, 2000);

    setTimeout(() => {
        console.log("1s")
    }, 1000);

    setTimeout(() => {
        console.log("3s")
    }, 3000);

    setTimeout(() => {
        console.log("0s")
    }, 0);
    console.log("start");
}

실행 결과는, 아래와 같다.

setTimeout함수는 비동기 함수로써 설정해준 숫자에 따라 ms단위로 지연시켜준다고 이해하면 된다.

위 프로그램이 실행되는 순서를 설명해보자면 다음과 같다.

 

1. EventLoop()함수를 실행 시키면 가장 먼저 EventLoop가 Call Stack에 쌓이게 된다.

2. 함수 내의 2초로 설정한 setTimeout함수를 만나면 Call Stack에 쌓인다.

3. setTimeout함수는 비동기 함수이므로 Web API로 넘어가고 해당 setTimeout함수는 return된다.

4. 아래의 1초, 3초로 설정한 setTimeout도 2번, 3번과 동일하게 작동한다.

5. Web api에는 1s, 2s, 3s를 각각 출력시키는 console.log가 담겨져 있으며 각각 setTimeout으로 설정한 지연시간이 종료되면 Callback Queue에 쌓이게 된다.

6. conosole.log를 만나면 Call Stack에 쌓이게 된다.

7. CallStack에는 console.log, EventLoop()함수가 담겨져 있고, 마지막으로 적재된 console.log가 반환되고 EventLoop()함수가 반환된다.

8. Callback Queue에는 1s, 2s, 3s 가 순서대로 쌓여져 있는 형태이다.

9. 이때 Event Loop는 Call Stack과 Callback Queue를 계속 바라보고 있다가 Callback Queue에 반환해야 될 함수가 있으면서, Call Stack이 비어있을 경우, Callback Queue의 함수를 Call Stack으로 넘긴다.

10. Call Stack에 적재된 함수가 반환된다.

 

Call Stack의 입장에서는

1. EventLoop() 함수 적재

2. setTimeout(2s, 1s, 3s) 적재

3. Call Stack의 setTimeout(2s, 1s, 3s)은 Web API로 넘어감

4. console.log 적재

5. console.log 반환

6. EventLoop() 반환

7. console.log 1s ~ 3s 적재 및 반환

 

Web API의 입장에서는

1. 2s setTimeout함수 적재

2. 1s setTimeout함수 적재

3. 3s setTimeout함수 적재

4. 각각 설정된 지연시간이 만료되면 Callback Queue에 넘겨줌

 

Callback Queue의 입장에서는

1. console.log 1s

2. console.log 2s

3. console.log 3s

 

이런 구조로 데이터가 흘러간다.

 

 

참고 : developer.mozilla.org/ko/docs/Web/JavaScript/EventLoop

동시성 모델과 이벤트 루프 - JavaScript | MDN

www.zerocho.com/category/JavaScript/post/597f34bbb428530018e8e6e2

(JavaScript) 호출 스택과 이벤트루프