1.
콜스택에 있는 코드 실행
2.
setTimeout, Promise 등 Web API 사용 시 Web APIs로 이동
3.
Web API는 API 작업 각각마다 스레드를 가지고 있음. 작업이 완료되면 콜백 큐(task queue)에 콜백을 넣음
4.
콜스택에 모든 함수가 비워지면 micro task queue - (macro) task queue 순서대로 콜스택에 콜백 함수를 넣어서 실행 (micro task queue는 브라우저 렌더링보다 더 먼저 처리된다.)
5.
requestAnimationFrame queue은 브라우저 repaint 이전 단계에서 실행됨
micro가 macro보다 실행 순서가 빠름. (micro - promise, mutation ovbserver 등, macro - setTimeout 등)
await의 경우.
let x = await bar();// bar() 함수 정의는 생략
console.log(x);
console.log('Done');
JavaScript
복사
Copy위의 코드는 사실 다음과 같은 코드와 같은 의미를 가진다.
bar().then(x => {
console.log(x);
console.log('Done');
});
JavaScript
복사
즉, await 키워드 다음에 나오는 동일 라인의 코드들은 모두await bar() 의then 핸들러의 콜백 함수로 들어간다는 뜻이다.
Plain Text
복사
만일 MicroTask Queue를 사용하는 Promise 코드나 Mutation Observer 의 콜백에서 무한 루프 까지는 아니더라도 지나치게 MicroTask Queue에 콜백을 지나치게 적재하는 작업이 있다면 이를 조심히 다루어야 한다
JavaScript
복사
•
micro task queue가 비워지지 않으면 여기에서 병목이 생기면서 다른 이벤트 콜백이나 macro task queue 실행이 안되기 때문
