Javascript event loop

이벤트 루프는 브라우저에 정의되어 있습니다.

이는 whatwg의 명세를 보면 확인할 수 있습니다.

html은 이전에는 단순 마크업 언어에 불과하였지만 현재는 마크업 언어 + web api 들을 지칭합니다.

이전 까지의 단순 마크업 언어에 불과했던 위상에서 벗어나야 한다 생각합니다.

 

html 5로 들어서면서 그래픽 표현, 양방향 통신 등등 많은것들이 가능해졌습니다.(html5을 애플에서 사용하면서 플래시를 배제하였고 이로인해 어도비에서 많은 언론 플레이를 했던걸로 기억합니다.)

html 에 관련한 글은 나중에 포스팅 할 수 있도록 하고 다시 본론으로 돌아오겠습니다.

 

이 글은 Event loop의 모든 것을 다루진 않습니다. 

몇가지 주요한 관점만 살펴보고자 합니다.

 

위는 브라우저에서의 런타임을 나타낸 것입니다.

 

heap: 메모리 할당이 일어나는 영역(객체 등등)

call stack: 코드 실행에 따라 호출 스택이 쌓이는 영역

 

(dom, ajax, timeout, event loop, task queue 등은 런타임 환경이 제공해 줍니다. (브라우저 or node.js))

 

task queue는 web api에 의해 추가되고 콜 스택이 비게 되면 event loop에 의해 콜스택에서 순차적으로 실행이 됩니다.

event loop는 non blocking io를 수행하기 위해서 필수적인 요소 입니다.

 

비동기 수행을 필요로 하는 동작들이 있습니다.

promise, settimeout, setinterval, requestAnimationFrame 등등 열거한 것들은 task queue에 포함되게 되고 순차적으로 실행이 되게 됩니다.

task queue에도 종류가 있고 우선순위가 있습니다.

 

micro task queue > animation frame > macro task queue 가 우선순위 입니다.

promise는 micro task

requestAnimationFrame은 animation frame

setTimeout, setInterval 등은 macro task queue에 위치하게 됩니다.

 

event loop는 아래와 같이 동작하게 됩니다.

1. macro task queue에서 가장 오래된 테스크를 실행합니다.

2. 모든 micro task를 수행합니다.
     micro task queue는 크기가 0이 될때까지 순회합니다. 있으면 실행을 하게 되구요

3. 렌더링 할것이 있으면 처리합니다.

4. micro task queue가 비었다면 다음 macro task queue를 실행합니다.

5. 다시 micro task queue를 확인합니다. 있으면 전부 실행 없으면 macro task queue를 실행합니다.

 

macro task queue는 하나씩 실행하고 micro task queue가 있는지 없는지 확인하고 있으면 queue가 비어질 때까지 실행합니다.

 

따라서 아래와 같은 코드의 실행은 결과처럼 진행이 됩니다.

console.log('script start')

setTimeout(() => console.log('first setTimeout'))

queueMicrotask(() => console.log('micro task queue'))

Promise.resolve('a').then(() => console.log('promise'))

console.log("script middle");

requestAnimationFrame(() => console.log("animation frame"));

console.log("script end");


// script start
// script middle
// script end
// micro task queue
// promise
// animation frame
// first setTimeout

promise는 micro task,

requestAnimationFrame은 animation frame,

setTimeout은 macro task queue에 enque 되기 때문에 우선순위에 따라 위와 같이 실행이 됩니다.

 

javascript 에서는 queueMicrotask 명령어를 통해 micro task queue에 직접 넣어줄 수도 있습니다.

 

 

출처: https://developer.mozilla.org/ko/docs/Web/JavaScript/EventLoop#%EC%9D%B4%EB%B2%A4%ED%8A%B8_%EB%A3%A8%ED%94%84

이벤트 루프 - JavaScript | MDN

https://html.spec.whatwg.org/multipage/webappapis.html#concept-task

HTML Standard

https://developer.mozilla.org/ko/docs/Web/API/HTML_DOM_API/Microtask_guide

JavaScript의 queueMicrotask()와 함께 마이크로태스크 사용하기 - Web API | MDN

https://iamsjy17.github.io/javascript/2019/07/20/how-to-works-js.html

Songlog