[Javascript] Event Loop, Task Queue

1. Javascript의 동작

자바스크립트는 Single Thread기반이며 *Non-Blocking 방식으로 동작됩니다. 하지만 콜 스택, 이벤트 루프, 콜백 큐가 독립적으로 동작되는 것이 아니며 웹 브라우저, Node.js 와 같은 Multi Thread 환경에서 실행되고 각 기능이 적절하게 사용됨으로써 Multi Thread와 같은 사용이 가능합니다.

 

* Non-Blocking : A함수가 B함수를 호출할 때 제어권을 잃지 않음 (블로킹 되지 않음)

 

 

2. Javascript Event Loop

JS Engine에서 제공하는 Memory Heap과 Call Stack은 각 변수와 참조를 저장하고, 콜스택에 저장된 실행 컨텍스트를 통해 자바스크립트 코드가 실행 됩니다. 추가적으로 코드를 실행시키기 위해 필요한 이벤트 루프와 콜백 큐가 더해지면 자바스크립트 이벤트의 전반적인 흐름을 이해할 수 있습니다. JS Engine에 대한 내용은 Memory Leak 에서 조금 더 자세히 설명하였습니다.

 

1) Event Loop

브라우저와 Node.js 에서 제공되는 Event Loop는 싱글스레드 기반인 자바스크립트가 멀티 쓰레드로 동작되는 브라우저, Node환경과 연동되기 위해 사용됩니다. 기본 코드실행은 메인스레드에서 실행되며 같은 이벤트 루프를 공유합니다. 

메인 스레드는 코드 실행, 이벤트 리스너, 렌더링 페인팅 등의 동작을 수행합니다.

 

 

2) Task Queue

Task Queue에 있는 task(Function) 들은 이벤트 루프를 통해 콜스택으로 이동되어 수행됩니다. Task Queue는 Micro / Macro Task로 나뉩니다. 

자바스크립트 엔진은 Macro Task Queue에서 가장 오래된 Task를 실행합니다. 이후 Task를 하나 처리 할 때마다 렌더링작업을 수행하기 전에 Micro Task Queue에 쌓인 모든 Task를 먼저 처리한 뒤 rendering -> macro Task가 수행됩니다. 

 

 

* Task별 주요 Function

macrotasks: requestAnimationFrame, I/O, UI rendering, setTimeout, setInterval, setImmediate
microtasks: process.nextTick, Promises, queueMicrotask(f), MutationObserver

 

 

참고사이트
https://ko.javascript.info/event-loop

https://velog.io/@yejineee/%EC%9D%B4%EB%B2%A4%ED%8A%B8-%EB%A3%A8%ED%94%84%EC%99%80-%ED%83%9C%EC%8A%A4%ED%81%AC-%ED%81%90-%EB%A7%88%EC%9D%B4%ED%81%AC%EB%A1%9C-%ED%83%9C%EC%8A%A4%ED%81%AC-%EB%A7%A4%ED%81%AC%EB%A1%9C-%ED%83%9C%EC%8A%A4%ED%81%AC-g6f0joxx

https://blog.toktokhan.dev/t-767eb0fa38f3

https://baeharam.netlify.app/posts/javascript/event-loop