首先看一段代码,请写出输出结果:
console.log("Start");
setTimeout(function(){
console.log("SetTimeout");
});
new Promise(function(resolve,reject){
console.log("Promise");
resolve();
}).then(function(){
console.log("Then");
});
console.log("End");
输出结果:宏任务及微任务实例输出结果
宏任务和微任务分类:
- 宏任务(macrotask):主代码块,setTimeout,setInterval等(可以看到,事件队列中的每一个事件都是一个macrotask)
- 微任务(microtask):Promise,process.nextTick等
运行机制:
1.执行一个宏任务(栈中没有就从事件队列中获取)
2.执行过程中如果遇到微任务,就将它添加到微任务的任务队列中
3.宏任务执行完毕后,立即执行当前微任务队列中的所有微任务(依次执行)
4.当前宏任务执行完毕,开始检查渲染,然后GUI线程接管渲染
5.渲染完毕后,JS线程继续接管,开始下一个宏任务(从事件队列中获取)
图解:
上面代码运行过程:
- 主代码块:宏任务开始执行
-
console.log("Start");
:同步任务,主线程,立即执行 - 异步宏任务,等待主线程执行完毕
setTimeout(function(){
console.log("SetTimeout");
});
- 同步任务,主线程,立即执行
new Promise(function(resolve,reject){
console.log("Promise");
resolve();
});
- 异步微任务,等待主线程执行完毕
.then(function(){
console.log("Then");
});
-
console.log("End");
:同步任务,主线程,立即执行 - 主代码块执行完毕,判断是否有微任务,执行异步微任务
then()
,最后执行下一个宏任务setTimeout()
网友评论