[call stack] ~~ event loop ~~ (web Api(setTimeout, Promise, requestAnimationFrame)) ~~ Task/ MicroTask / animationFrames
chrome 기준 규칙(브라우저마다 상이함)
http://sculove.github.io/blog/2018/01/18/javascriptflow/
https://blueshw.github.io/2018/01/28/tasks-microtasks-queues-and-schedules/
https://medium.com/@lydiahallie/javascript-visualized-promises-async-await-a3f1aad8a943
web api에 의해..
등록된 시간이 지난 후, setTimeout 에 등록된 callback을 Task에 등록
requestAnimationFrame 실행 후, requestAnimationFrame에 등록된 callback은 Animation frames에 등록
Promise가 resolve, reject 되면, Promise의 then에 등록된 callback은 MicroTask에 등록
const promise = function(){
return new Promise((resolve, rejct)=>{
setTimeout(()=>{
console.log("resolve")
resolve(1)
}, 0)
})
}
async function TEST(){
console.log("script start");
setTimeout(function() {
console.log("setTimeout");
}, 0);
await promise();
Promise.resolve().then(function() {
console.log("promise1");
}).then(function() {
console.log("promise2");
});
requestAnimationFrame(function() {
console.log("requestAnimationFrame");
})
console.log("script end");
}
TEST();
의 결과는
script start
setTimeout
resolve
script end
promise1
promise2
requestAnimationFrame
이다.
좀더 깊이 들여다 보자
async function TEST(){
//event loop - 바로 실행
console.log("script start");
//task1 등록 - microtask가 비어 있으니 0초뒤 바로 실행
setTimeout(function() {
console.log("setTimeout");
}, 0);
// setTimeout을 Task로 보낸 후 resolve를 기다린다
// 이 말밖에 정리할 말이 없네요,, event loop에 await promise가 있으면
// setTimeout이 작동 안할 것이고 ,,
// await가 붙으면 그냥 task로 가려나요 .. 왠지 그럴 것 같습니다 아래 예제를 더 보면
// 이벤트 루프는 '현재 실행중인 태스크가 없을 때'(주로 호출 스택이 비워졌을 때)
// 태스크 큐의 첫 번째 태스크를 꺼내와 실행한다. 고 하네요
// 호출 스택이 안비워져 있어도 실행중인 태스크가 없다면 태스크를 꺼내와 실행 하는
// 모양입니다.
await promise();
// microtask 1, 2 등록
Promise.resolve().then(function() {
console.log("promise1");
}).then(function() {
console.log("promise2");
});
// animation frame -> microtask 1, 2 resolve 후 호출
requestAnimationFrame(function() {
console.log("requestAnimationFrame");
})
//event loop 바로 실행
console.log("script end");
}
Promise microTask Queue이지만, resolve는 꼭 순차적으로 되는 것은 아니다.
const pr1 = function(){
return new Promise((resolve, reject)=>{
setTimeout(()=>{
console.log("pr1")
resolve(1)
}, 100)
})
}
const pr2 = function(){
return new Promise((resolve, reject)=>{
setTimeout(()=>{
console.log("pr2")
resolve(2)
}, 50)
})
}
async function Test(){
setTimeout(()=>{
console.log('setTmeout')
}, 100)
await pr1()
pr2()
}
setTimeout
pr1
pr2
async function Test(){
setTimeout(()=>{
console.log('setTmeout')
}, 100)
pr1()
pr2()
}
pr2
pr1
setTimeout
끝