- Memory Heap: 메모리 할당이 일어나는 곳입니다.
- Call Stack: 실행될 코드의 "한 줄 단위"로 할당됩니다.
- Web APIs: 비동기 처리를 담당합니다.
- Callback Queue: 비동기 처리가 완료된 후 실행되어야 할 콜백 함수가 차례로 할당됩니다.
- Event Loop:
- Call Stack이 비어있는지 확인합니다.
- Call Stack이 비어있다면 Microtask Queue에 task가 있는지 확인합니다.
- task가 있다면 Call Stack 으로 이동시켜 할당합니다.
- Microtask Queue가 비어있다면 Event Queue에 task가 있는지 확인합니다.
- task가 있다면 Call Stack 으로 이동시켜 할당합니다.
여기서 한 가지 더 알아두어야할 것은 Callback Queue 에 담겨진 작업들의 호출 순서가 Queue 라는 자료구조의 특성처럼 선입선출을 꼭 보장하지 않는다는 것인데요.
아래 사진처럼 Queue 는 단순히 하나가 아닙니다.
=> Microtask Queue > Animation Frames > Task Queue 순의 우선 순위를 가지고 있습니다.
- Microtask 로는 다음과 같은 것들이 속합니다.
- Promise
- process.nextTick
- Object.observe
- MutationObserver
참조: https://www.youtube.com/watch?v=S1bVARd2OSE