前言:
想了解什么是微任务和宏任务,首先得知道什么是异步任务,什么是同步任务?
试想一下,如果js的任务都是同步(书写顺序和执行顺序一致)的,那么遇到定时器,网络请求等这类型需要延时执行的任务会发生什么?
答案显然易见,页面可能会瘫痪,需要暂停下来等待这些需要很长时间才能执行完毕的代码
所以 :
- 同步任务 : 同步任务不需要进行等待,必须立即看到执行结果,比如console
- 异步任务 : 异步任务需要等待一定的时间才能看到结果,比如setTimeout、网络请求等
异步任务 :
宏任务 : 宿主环境的异步任务
微任务 : ECMAScript语法约定的异步任务
举例 :
宏任务 : script, setTimeout, setInterval, ajax, 事件会调(click)
微任务 : Promise.then ...
需要明确: 微任务的优先级要高于宏任务.微任务执行以后,才会执行下一个宏任务
执行顺序 :
- 先执行同步代码
- 遇到宏任务，放入队列
- 遇到微任务，放入微任务队列
- 执行栈为空
- 将微任务入栈执行
- 所有的微任务完成之后，取出宏任务队列来执行
助解图 :
代码练习 :
console.log(1)
setTimeout(function() {
console.log(2)
new Promise(function(resolve) {
console.log(3)
resolve()
}).then(function() {
console.log(4)
})
})
new Promise(function(resolve) {
console.log(5)
resolve()
}).then(function() {
console.log(6)
})
setTimeout(function() {
console.log(7)
new Promise(function(resolve) {
console.log(8)
resolve()
}).then(function() {
console.log(9)
})
})
console.log(10)
分析
同步代码 : 1, 5, 10
微任务 : 3, 4, 6, 9
宏任务 : 2, 7
分析 : 49都是宏任务,但是他们都被宏任务setTimeout包裹,所以执行顺序先执行宏任务的2,7然后再执行微任务中的3,再讲4放入宏任务中,4执行. 9同理
结果: 1, 5, 10, 6, 2, 3, 4, 7, 8, 9,
