微任务队列和宏任务队列
微任务代码(js语法)
- Promise对象.then()
宏任务代码(宿主环境)
- script
- dom事件
- ajax
- setTimout
回顾:
异步任务
不是马上执行,是放入到队列中等待;
如果所有的任务都要按序等待,那么也不行,需要有一个能插队的机制。所以又将异步任务分为微任务和宏任务,同时对应微任务队列和宏任务队列。
当主线程空闲时,先执行微任务队列中的任务,再去执行宏任务队列中的任务。
示例
阅读如下代码执行结果:
console.log(1);
setTimeout(() => {
console.log(2);
}, 0)
let p = new Promise((resolve, reject) => {
resolve(3)
})
p.then(res => {
console.log(res);
})
console.log(4);
结果: 1 4 3 res 2
图示:
例题:
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 6 2 3 4 7 8 9
微任务和宏任务以及同步代码的执行流程
先执行第一个宏任务(<script>), 然后同步任务, 然后微任务, 然后下一个宏任务如此循环, 直到所有代码执行完毕