태스크 큐 이벤트루프(3) [ TIL ] [ Javascript ]

 

Problem

 

태스크 큐에 대해서 알아보장

 

---

Try

 

태스크 큐는 두가지 종류라고 한다. 

첫번째는 마이크로 태스크 큐, 두번째는 태스크 큐 이렇게 두개의 태스크 큐가 존재한다.

 

마이크로 태스크는 자신을 생성한 함수 또는 프로그램이 종료됐고 JavaScript 실행 스택이 빈 후에, 그러나 사용자 에이전트가 스크립트 실행 환경을 운용하기 위해 사용하는 이벤트 루프로 통제권을 넘기기 전에 실행되는 짧은 함수입니다.
- mdn web docs -

 

 

코드 실행

console.log("안녕하셈!");

setTimeout(() => {
  console.log("약 2초가 지났습니다.");
}, 2000);

setTimeout(() => {
  console.log("약 0초가 지났습니다.");
}, 0);

console.log("안녕!");

Promise.resolve().then(() => {
  console.log("첫번째 프로미스 입니다.");
});

Promise.resolve().then(() => {
  console.log("두번째 프로미스 입니다.");
});

console.log("하위~!");

 

호출 스택 :

전역 -> console.log push & pop -> setTimeout2 push Web API 호출 & pop -> setTimeout5 push Web API 호출 & pop 

-> console.log push & pop -> Promise push Web API 호출 & pop -> Promise push Web API 호출 & pop 

-> console.log push & pop -> 대기 -> PromiseCallback1 push & pop -> PromiseCallback2 push & pop 

-> callback0 push & pop -> callback1 push & pop -> 태스크 큐, 마이크로 태스크 큐 호출 스택이 비었으면 종료

 

 

Web API : 

callback2 -> 타이머 실행 -> 태스크 큐 이동

callback0 -> 타이머 실행 -> 태스크 큐 이동

PromiseCallback1 -> 마이크로 태스크 큐 이동

PromiseCallback2 -> 마이크로 태스크 큐 이동

 

 

테스크 큐 : 

callback0 , callback2 -> 마이크로 태스크 큐가 비게되고 호출 스택이 비게 되었을 때 까지 대기

 

마이크로 테스크 큐 : 

PromiseCallback1, PromiseCallback2 -> 호출 스택이 비었다면 프로미스 작업이 먼저 호출스택으로 이동해 실행된다. 순서는 먼저 끝난 순서

 

 

 

---

Solve

 

결과적으로 태스크 큐는 비동기 작업의 완료 후 실행될 콜백 함수들을 저장하는 대기열이다.

이벤트 루프는 실행 컨텍스트 스택이 비어있을 때 태스크 큐의 작업을 실행하여 비동기 작업을 처리한다.

 

1. 마이크로 태스크 큐

- 마이크로 태스크 큐는 Promise, Mutation Observer, Object.observe 등과 같은 마이크로 태스크를 포함한다.

- 마이크로 태스크는 일반적인 비동기 작업보다 우선적으로 처리되며, 이벤트 루프의 한 사이클 동안 모든 마이크로 태스크가 처리된 후에만 다음 사이클로 넘어 간다.

- 마이크로 태스크는 주로 프로미스의 처리, DOM 변경 등과 같은 미세한 작업을 처리하기 위해 사용됩니다.

 

 

2. 태스크 큐

- 태스크 큐는 비동기 작업의 완료 후 실행된 콜백 함수들을 포함한다.

- 일반적으로 setTimeout, setInterval, XMLHttpRequest, 이벤트 핸들러 등의 비동기 작업의 콜백 함수들이 태스크 큐에 들어간다.

- 태스크 큐의 작업은 마이크로 태스크 큐의 작업이 모두 처리된 후에 순차적으로 실행된다.

 

이벤트 루프는 실행 컨텍스트 스택이 비어있을 때, 우선적으로 마이크로태스크 큐에 있는 작업을 모두 처리한 후에 태스크 큐의 작업을 하나씩 처리한다. 이러한 방식으로 비동기 작업의 콜백 함수들이 순차적으로 실행되며, 자바스크립트는 싱글 스레드로 동작하면서도 비동기 작업을 효율적으로 처리할 수 있게 된다.

 

이벤트 루프의 동작 방식과 태스크 큐의 사용은 자바스크립트에서 비동기 프로그래밍을 가능하게 하며, 웹 브라우저 환경에서는 사용자 이벤트, 네트워크 요청 등 다양한 비동기 작업을 처리할 수 있도록 된다.

 

 

 

 

---

What I Learned

 

태스크 큐의 우선 순위에 대해서 알게 되었다.

메모리힙, 호출스택, Web API, 태스크 큐 들을 종합해 간단히 이벤트 루프의 동작과정을 알게 되었다.

그리고 Web API 는 백그라운드 에서 돌아간다는 것도 알게 되었다.

총 정리하면 콜스택은 자바스크립트 엔진 , 브라우저에 Web API 와 태스크 큐 가 있고, Web API 는 백그라운드 에 포함된다는 것을 알게 되었다.

node.js 오픈소스 개인 프로젝트를 보니 class 를 상당히 많이 사용하는 것을 보았다. 다음엔 OOP 에 대해서 공부해보려고 한다.