JS) JS의 동작방법과 Queueu의 종류에따른 작동 (Microtask Queue,Animation Frames, Task Queue)
1
JavaScript & TypeScript
목록 보기
13/15
1. JS의 동작
2. 코드로 알아보는 JS 동작 순서
1. JS의 동작
자바스크립트의 내부 구조이다. 왼쪽부터 명칭과 기능을 설명하겠다.
1.Memory Heap: 메모리 할당이 일어나는곳 (Heap: 객체(변수,함수)들을 저장하는곳)
2.Call Stack: 코드가 실행되는곳(싱글스레드로 한번에 한개의 코드만 실행된다)
3.Web API: 비동기 처리를 하는곳
4.Callback Queue: 비동기 처리가 끝난 후 실행 되어야할 콜백 함수가 차례로 할당된다.
5.Event Loop: Queue에 할당된 함수를 순수에 맞춰 Call Stack에 하나씩 전달한다.
2. 코드로 알아보는 JS 동작 순서
예제1)
Call Stack에 코드가 쌓이는 순서(동기적)
예제2)
Settimeout을 사용했을 경우 코드가 실행되는 순서(비동기적)
위와 같은 경우 어떻게 코드가 실행 될까?
console.log로 된 출력은 바로 출력되며 setTimeout함수로 비동기적인 함수가 실행되면 Web APIs와 CallBackQueue를 거쳐 진행되는것을 볼수 있다.
예제3)
Promise와 함께 사용했을경우 코드가 실행되는 순서(비동기적)
TIP) Promise그 자체는 동기적 함수이다. 하지만 .then을 만나는 순간 비동기적으로 역할을 하게 된다.
출력결과)
우리가 배웠던 내용대로라면 Promise도 비동기적 함수로 WebAPI에 들어간뒤 Callback Queue에 들어가는 부분은 맞다. 하지만 위 코드는 먼저 setTimeout함수가 먼저 WebAPI에 먼저 들어갔으니 선입선출인 Queueu의 특징에 따라 setTimeout보다 뒤에 Promise가 출력되어야 한다.
이와 같은 결과는 이벤트 루프가 Queue에 종류에따라 우선 실행 순서가 정해졌기 때문이다.
Queue의 종류
1. Task Queue: 이 Queueu는 setTimeout(), setInterval(), setImmediate()와 같은 task를 넘겨받는다.
2. Microtask Queue: 이 Queueu는 Promise나 async/await, process.nextTick, Object.observe, MutationObserver과 같은 비동기 호출을 넘겨받는다.
3. Animation Frames: requestAnimationFrame과 같이 브라우저 렌더링과 관련된 task를 넘겨받는 Queue이다.
우선 실행 순서는 Microtask Queue > Animation Frames > Task Queue로 이루어져 있다.
TIP) 이벤트 루프는 Microtask Queue나 Animation Frames를 방문할 때는, 큐 안에 있는 모든 작업들을 수행하지만, Task Queue를 방문할 때는 한 번에 하나의 작업만 call stack으로 전달하고 다른 Queue를 순회한다.
참고
이게 되네?