이벤트 루프 Job Queue , Event Queue 차이?

이벤트루프

---

자바스크립트는 싱글스레드로 코드를 실행하기 때문에 한번에 하나의 코드만 실행한다. 이 제한은 실제로 동시성을 신경 쓰지 않고 간단히 프로그램을 구현하게 할 수 있는 자바스크립트의 장점이자 단점이다. (단점은 아마도 성능이겠지만 자바스크립트 엔진도 성능향상이 많이 되어 일반적인 웹서비스에서 크게 신경 쓰지 않고 작업 할 수 있다고 한다. *개인적인 의견으로는 웹 개발자로서 가장 중요한건 모든 브라우저에서 정상적으로 작동 되는지가... * )

보통 대부분의 브라우저는 하나의 브라우저 탭에 하나의 이벤트루프가 존재한다. 하나의 웹페이지가 브라우저 전체를 먹통시키는것을 막기 위해 그렇다고 한다. 이러한 환경은 API 호출을 다루는 동시다발적인 이벤트루프를 관리한다. 예를 들면 Web Workers 는 그 자신만의 이벤트 루프를 가진다.

위와 같은 이유로 자바스크립트 개발자들은 코드 작성 시에 어떠한 작업이 다른 작업을 블락하지 않도록 신경 써야 한다. (물론 상황에 따라 어떠한 작업 이후에 실행 되어야 한다면 임의로 블락 되도록 구현해야 할 상황이 있다. 예를 들면 주문이 정상적으로 접수 된 후에 결제 처리를 해야 할 경우. 결제가 정상적으로 처리된 이후에 재고처리를 해야하는 경우 등등)

만약 자바스크립트 코드가 실행 되어 이벤트루프로 부터 제어권을 넘겨 받는 시간이 길어지게 되면 유저가 웹페이지를 클릭 혹은 스크롤링을 못하게 되는 상황이 되어 화면이 멈추는 것 같은 현상이 나타나게 된다. 대부분의 자바스크립트 입출력은 non-blocking으로 구현되어 있는데 네트워크 요청이나 파일제어 등 이 그 예이다. 예외로 직접 blocking 을 해야하는 상황이 있을 경우가 있는데 이를 처리하기위해 수많은 callback이 사용되어 자바스크립트는 callback 지옥이라고 불리었던 때도 있었다. (현재는 promises 와 async/await 으로 구현하지만 이를 지원하지 않는 브라우저의 경우에는 .... )

---

call stack

자바스크립트에서 이벤트루프는 지속적으로 call stack을 확인하여 실행이 필요한 함수가 있는지 체크한다. call stack은 LIFO 구조로 가장 마지막에 들어간것이 가장 먼저 나오는 스택의 형태를 띄고 있다. 대개 이렇게 스택구조로 실행 되어야 할 함수를 쌓아 놓고 순서대로 처리한다.

const bar = () => console.log('bar')

const baz = () => console.log('baz')

const foo = () => {
  console.log('foo')
  bar()
  baz()
}

foo()

// expected result
'foo'
'bar'
'baz'

실행 과정을 살펴보자면 각 함수를 해당 변수에 선언하고 foo()실행시에 foo가 처음 call stack 에 쌓이고 그 이후에 bar 그 다음에 baz가 차례로 call stack에 쌓이고 각각의 함수가 종료되면 종료된 함수는 콜스택에서 비운다. 자바스크립트 이벤트루프는 차례대로 콜스택이 비워질때까지 이 단계를 반복한다.

 

---

Task Queue , Event Queue

자바스크립트에서 비동기로 호출된 함수들은 콜스택에서 이벤트 큐 혹은 태스크 큐로 이동되어 콜스택이 비워질 때까지 대기하다가 콜스택이 비워지면 콜스택으로 이동되어 마지막에 실행 된다.

const bar = () => console.log('bar')

const baz = () => console.log('baz')

const foo = () => {
  console.log('foo')
  setTimeout(bar, 0)
  baz()
}

foo()

// result
'foo'
'baz'
'bar'

초기에 foo 가 실행되어 콜스택에 쌓이고 setTimeout으로 호출된 bar는 이벤트 큐에 쌓여 콜스택에 쌓인 함수들이 종료되기 전까지 기다리다가 콜스택 내의 모든 함수가 종료되면 이벤트 큐 에서 콜스택으로 이동되어 실행 되기 때문에 bar의 실행결과가 baz 이후 에 나타난다.

왜 이런 현상이 나타날까? WebAPI는 비동기로 작동하는데 setTimeout이 호출 될 때 브라우저 또는 Node는 타이머를 시작한다. 타이머는 0과 bar를 인자로 받는데 bar는 콜백 함수로 큐에 들어간다. 그 이후 콜스택에서 더이상 실행 될 함수가 없으면 이벤트 큐에서 콜스택에 쌓은 후 다시 콜스택이 비워질때까지 함수를 실행한다.

---

Job Queue

ECMA 2015 에서 나온 개념으로 Promises에 의해 사용된다. promises는 async 함수를 콜스택에 넣는 대신에 가능한 빨리 실행하도록 하는 방법이다. Promises 는 현재 함수가 끝나기 전에 resolve 된후 현재 함수가 끝나자마자 바로 실행 된다.

job queue는 event queue 보다 우선 권을 가지고 있어 event queue에 쌓인 함수보다 먼저 실행된다. 참조하고 있는 글에서는 message queue는 놀이기구에서 줄을 서고 있는 사람들이고 job queue 는 우대권을 가지고 있는 사람들이 일반권을 가지고 있는사람들 보다 먼저 타는 것으로 비유가 되어 있다.

예제)

const bar = () => console.log('bar')

const baz = () => console.log('baz')

const foo = () => {
  console.log('foo')
  setTimeout(bar, 0)
  new Promise((resolve, reject) =>
    resolve('should be right after baz, before bar')
  ).then(resolve => console.log(resolve))
  baz()
}

foo()

// result
'foo'
'baz'
'should be right after baz, before bar'
'bar'

결과적으로 알아본 바에 따르면 job queue 와 event queue의 차이점은 job queue 가 우선권을 가진다 라는 정도가 다인 것 같다.

 

참고링크 )

 

https://evan-moon.github.io/2019/08/01/nodejs-event-loop-workflow/

로우 레벨로 살펴보는 Node.js 이벤트 루프

https://asfirstalways.tistory.com/362

[JS] JavaScript의 Event Loop

 

 

https://velog.io/@imacoolgirlyo/JS-%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EC%97%94%EC%A7%84-Event-Loop-Event-Queue-Call-Stack

[JS] 자바스크립트 엔진, Event Loop, Event Queue, Call Stack

https://medium.com/@Rahulx1/understanding-event-loop-call-stack-event-job-queue-in-javascript-63dcd2c71ecd

Understanding Event Loop, Call Stack, Event & Job Queue in Javascript

 

https://stackoverflow.com/questions/40880416/what-is-the-difference-between-event-loop-queue-and-job-queue

What is the difference between "event loop queue" and "job queue"?