태스크 큐(매크로태스크 큐) VS 마이크로태스크 큐

ming0·2022년 6월 20일
0
post-thumbnail

자바스크립트는 동기식 언어이다.

자바스크립트 엔진은 단 하나의 실행 컨텍스트 스택을 갖는다.
함수를 실행할 수 있는 창구가 단 하나이며, 동시에 2개 이상의 함수를 동시에 실행할 수 없다는 것을 의미한다.
한 번에 하나의 태스크만 실행할 수 있는 싱글 스레드(single thread)방식으로 동작한다.
그래서 처리에 시간이 걸리는 태스크를 실행하는 경우 블로킹(blocking 작업 중단)이 발생하게 된다.
👉 이러한 현상을 비동기 처리를 통해 해결할 수 있다.


자바스크립 엔진은 크게 2개의 영역으로 구분할 수 있다.

콜 스택 (call stack) : 생성된 실행 컨텍스트가 추가되고 제거되는 스택 자료구조인 실행 컨텍스트 스택
함수를 호출하면 함수 실행 컨텍스트가 순차적으로 콜 스택에 푸쉬되어 순차적으로 실행된다.
힙(heap) : 객체가 저장되는 메모리 공간
콜 스택의 요소인 실행 컨텍스트는 힙에 저장된 객체를 참조한다.

비동기 동작 원리

  1. 자바스크립트 엔진의 콜 스택에 실행될 함수가 쌓이게 되고, Web API(Background)를 호출하게 된다.
  2. Web API에서는 콜백 함수콜백 큐(태스크 큐)에 추가한다.
  3. 이벤트 루프는 콜백 큐와 콜 스택을 보며 콜 스택이 비면 콜백 큐의 함수를 꺼내 콜 스택에 넣는다.

태스크 큐는 마이크로태스크 큐매크로태스크 큐(일반 태스크큐 라고도 불림)으로 나뉜다.

마이크로태스크 큐(microtask queue) VS 태스크 큐(task queue, macrotask queue)

둘 다 콜백 함수이벤트 핸들러를 일시 저장한다는 점에서 동일하지만, 태스크 큐보다 마이크로태스크 큐가 더 우선순위가 높다.
즉, 이벤트 루프는 콜 스택이 비면 먼저 마이크로태스크 큐에서 대기하고 있는 함수를 가져와 실행한다.
이후 마이크로태스크 큐가 비면 태스크 큐에 대기하고 있는 함수를 가져와 실행한다.

  • microtask queue 👉 Promise
  • task queue, macrotask queue 👉 setTimeout, setInterval




<참고>
모던 JavaScript DeepDive
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#-%EB%A7%88%EC%9D%B4%ED%81%AC%EB%A1%9C-%ED%83%9C%EC%8A%A4%ED%81%AC-vs-%EB%A7%A4%ED%81%AC%EB%A1%9C-%ED%83%9C%EC%8A%A4%ED%81%AC

0개의 댓글