这是我参与「4月日新计划更文活动」的第19天。
今天带着带着大家一起来看一下浏览器宏任务和微任务的执行顺序的问题。
今天的知识点特别重要，而且这也是面试的时候很喜欢考察的一个知识点。
我打算用几个常用的例子来让大家深刻的学会这个知识。
例子1
说一下下面这段代码的执行顺序。
(() => {
console.log('1');
setTimeout(function() {
console.log('2');
process.nextTick(function() {
console.log('3');
})
new Promise(function(resolve) {
console.log('4');
resolve();
}).then(function() {
console.log('5')
})
setTimeout(() => {
console.log('20')
})
})
process.nextTick(function() {
console.log('6');
})
new Promise(function(resolve) {
console.log('7');
resolve();
}).then(function() {
console.log('8')
})
setTimeout(function() {
console.log('9');
process.nextTick(function() {
console.log('10');
})
new Promise(function(resolve) {
console.log('11');
resolve();
}).then(function() {
console.log('12')
setTimeout(() => {
console.log('40')
})
})
})
})()
请把大家的结果写在评论区，我看看有多少朋友这道题能够做出来。
好了，我也不卖关子，我把正确的结果贴出来给大家。
正确的结果：1 7 6 8 2 4 3 5 9 11 10 12 20 40
要能做出这道题，最重要的还是能理解宏任务和微任务的执行顺序，然后在通过这个知识点一直扩展延伸，一个个的细节去抠。
先说宏任务和微任务的执行步骤如下：
- 执行当前宏任务中的同步代码；
- 执行当前宏任务中的所有微任务，按照添加顺序依次执行；
- 执行浏览器的渲染工作，更新页面显示；
- 等待新的宏任务，如果没有新的宏任务，则继续执行微任务。
所以这一题中输出2和输出9属于两个不同的宏任务，所以在执行完成2这个宏任务之后立刻执行3这个微任务。
好了，以上知识点就讲到这里。
在结束这个话题之前，我在文章的末尾再放一个浏览器事件循环的题目给大家，看大家能不能做出来吧。
上代码：
(() => {
console.log('script start')
async function async1() {
await async2()
console.log('async1 end')
}
async function async2() {
console.log('async2 end')
return Promise.resolve().then(()=>{
console.log('async2 end1')
})
}
async1()
setTimeout(function() {
console.log('setTimeout')
}, 0)
new Promise(resolve => {
console.log('Promise')
resolve()
})
.then(function() {
console.log('promise1')
})
.then(function() {
console.log('promise2')
})
console.log('script end')
})()
先告诉大家答案：
输出结果是：script start => async2 end => Promise => script end => async2 end1 => promise1 => promise2 => async1 end => setTimeout
不知道有多少位同学能做对这个题目呢。
以上就是我今天学习的浏览器的宏任务和微任务执行顺序的知识点。
看到掘金上的好文章，如果对你有帮助，顺手点个赞，或者把文章收藏。不用担心找不到了，以后也能经常收到类似好回答，我会持续进行更新。
