자바스크립트 이벤트 루프 정리

자바스크립트 이벤트 루프 정리

자바스크립트 내부는 아래와 같이 구성되어 있다.

• Memory Heap: 변수나 함수 등이 저장(할당)되는 공간. 구조화 되지 않은 넓은 메모리 영역.
• Call Stack: 실행될 코드가 한 줄 단위로 저장되고 실행되는 공간. (LIFO)
• Web API: 비동기 처리를 담당.
• Callback Queue: 비동기 처리가 끝난 후 실행되어야 할 콜백 함수가 차례로 할당되는 곳.
  • Microtask Queue(Job Queue): Promise 처리. 실행 순위 1순위.
  • Animation Frames: 애니메이션 함수. 실행 순위 2순위.
  • Task Queue(Event Queue): setTimeout, setInterval 처리. 실행 순위 3순위.
• Event Loop: 콜 스택이 비어 있으면(모든 코드가 실행되었으면) 콜백 큐에 할당된 콜백함수들을 콜 스택에 할당한다.

이벤트 루프가 콜 스택에 넘길 콜백 함수를 콜백 큐에서 탐색할 때

마이크로 태스크 큐 > 애니메이션 프레임즈 > 태스크 큐 순으로 탐색하기 때문에

Promise 처리가 setTimeout, setInterval 보다 더 빠르게 실행된다.

예시

console.log('시작');

setTimeout(() => {
  console.log('timeout');
}, 0);

Promise.resolve().then(() => {
  console.log('promise');
});

// 임의로 설정한 함수. animation frames를 실행한다고 가정한다.
requestAnimationFrames(() => {
  console.log('animation');
});

console.log('끝');

위의 코드는 아래와 같이 실행된다.

1. 전역 실행콘텍스트인 anonymous가 call stack에 담김
2. console.log('시작') call stack에 담겼다가 '시작' 출력되면서 pop
3. setTimeout이 call stack에 담겼다가 pop되어 Web API로 전달. 0초 후 console.log('timeout') 가 콜백 큐에 담김.
4. Promise.resolve.then()이 call stack에 담겼다가 pop되어 Web API로 전달. console.log('promise')가 콜백 큐에 담김.
5. requestAnimationFrames가 call stack에 담겼다가 pop되어 Web API로 전달. console.log('animation')가 콜백 큐에 담김.
6. console.log('끝')이 call stack에 담겼다가 '끝' 출력되면서 pop
7. 더이상 읽을 코드가 없으므로 anonymous가 call stack에서 pop. call stack이 비워짐.
8. 이벤트 루프가 call stack이 비어 있는 걸 확인하고 callback queue중 microtask queue 탐색.
9. console.log('promise') 실행
10. 이벤트 루프가 call stack이 비어 있는 걸 확인하고 callback queue중 animation frames 탐색.
11. console.log('animation') 실행
12. 이벤트 루프가 call stack이 비어 있는 걸 확인하고 callback queue중 task Queue 탐색.
13. console.log('timeout') 실행

출력순서

시작 -> 끝 -> promise -> animation -> timeout

참고

참고1: https://www.youtube.com/watch?v=QFHyPInNhbo
참고2: https://www.youtube.com/watch?v=S1bVARd2OSE