Event Loop

자바스크립트는 Single Thread 기반의 언어로 한 번에 하나의 작업만을 처리할 수 있는 특징을 가지고 있다. 하지만 동시에 비동기 작업을 처리할 수 있어 동시에 많은 작업을 처리할 수 있다는 특징을 가지고 있기도 하다. 이 때 비동기로 동작하는 핵심 요소는 Node.js의 libuv 라이브러리와 브라우저가 가지고 있다.
싱글 쓰레드임에도 동시에 여러 작업을 처리하는 이와 같은 특징은 이벤트 루프에 기반한다.

 

자바스크립트는 싱글 쓰레드에서 작업을 처리하기 때문에 시간이 오래 걸리는 작업은 다른 작업을 진행할 수 없도록 한다. 이를 차단 기능이라고 부른다. 차단되는 것을 방지하기 위해 다양한 방법을 이용한다.(setTimeout, Promise 등)

 

브라우저는 Call Stack, Heap, Event Loop, Callback Queue, Web APIs 등으로 구성되어 있다.

• Heap: 메모리가 할당이 되는 곳으로 선언한 변수, 함수가 담기는 곳이다
• Call Stack: 코드가 실행될 때 쌓이는 곳이다. 하나의 스택만 존재하여 JS의 함수가 실행될 시 종료 이전에는 다른 작업이 끼어들지 못한다. JS 엔진에 의해 각 함수가 호출될 시 Frame stack을 형성하여 Call stack에 push되고 처리가 종료되면 stack에서 pop되는 형태로 진행된다.
• Web APIs : 브라우저에서 제공하는 API들로, JS 엔진과는 별도로 존재한다. Call Stack에서 실행되는 비동기 함수들은 Web API를 호출하고 Web API는 전달받은 콜백 함수를 Callback Queue에 전달한다. 
• Callback Queue : 비동기로 실행된 콜백 함수가 보관되는 곳으로, Call Stack으로 보내지기 위한 대기열이다. Call Stack이 비었을 시, 먼저 들어온 순서대로 Call Stack에 전달되어 수행되게 된다. Callback Queue는 아래와 같이 종류가 나누어진다. 각 Queue는 우선순위를 가지며 Microtask Queue > Animation Frame > Task Queue 순으로 우선순위가 높아 Call Stack이 비었을 시 마이크로 태스크 큐의 함수들이 우선적으로 실행된다.
  • Task Queue : setTimeout, setInterval에 전달된 함수들이 저장된다(Macrotask Queue라고도 부른다)
  • Microtask Queue(Job Queue) : Promise  함수들이 저장된다.
  • Animation Frames : requestAnimationFrame과 같은 경우

이벤트 루프는 Call Stack과 Callback Queue를 감시하며 Call Stack이 비어있을 경우에, Callback Queue에서 task를 꺼내 Call Stack에 추가하는 역할을 한다.

 

https://jakearchibald.com/2015/tasks-microtasks-queues-and-schedules/

Tasks, microtasks, queues and schedules

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