微任务和宏任务的执行顺序

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

• 前言
• • 宏任务和微任务的来源！
• js的执行顺序
• • 为什么会打印出这个顺序？（看图）
• 关于微任务和宏任务在浏览器中的执行顺序
• • 所以上图的意思就是
• 宏任务和微任务的分类
• • 宏任务：
  • 微任务：
  • 代码演示
• 总结

前言

宏任务和微任务的来源！

js 是单线程执行的，js中的任务按顺序一个一个的执行，但是一个任务耗时太长；
那么后面的任务就需要等待，为了解决这种情况，将任务分为了同步任务和异步任务；
而异步任务又可以分为微任务和宏任务。

js的执行顺序

console.log('script start');

setTimeout(function() {
console.log(‘setTimeout’);
}, 0);

Promise.resolve().then(function() {
console.log(‘promise1’);
}).then(function() {
console.log(‘promise2’);
});

console.log(‘script end’);

返回结果的打印顺序是：

script start
script end
promise1
promise2
setTimeout
12345

为什么会打印出这个顺序？（看图）

关于微任务和宏任务在浏览器中的执行顺序

微任务和宏任务的问题应该是前端面试中比较常见的，他们都从属于异步任务，主要区别在于他们的执行顺序，Event Loop的走向和取值

所以上图的意思就是

1）、存在微任务的话，那么就执行所有的微任务

2）、微任务都执行完之后，执行下一个宏任务

3）、1， 2以此循环着

对于微任务的执行顺序上也有些需要注意的地方

基本上，若你喜欢异步任务尽可能快地执行，那就使用process.nextTick

根据语言规格，Promise对象的回调函数，会进入异步任务里面的**”微任务“（microtask）**队列。

微任务队列追加在process.nextTick队列的后面。也属于本轮循环。

宏任务和微任务的分类

宏任务：

setTimeout

setInterval

js主代码

setImmediate(Node)

requestAnimationFrame(浏览器)

微任务：

process.nextTick

Promise的then方法

代码演示

console.log('script start')
async function async1() { //语法糖 async2()执行完毕 才执行下面 会加入在微观任务里面
await async2()
console.log('async1 end')
}
async function async2() {
console.log('async2 end')
}
async1()
setTimeout(function () {
console.log("setTimeout100")
}, 100)
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')
12345678910111213141516171819202122232425

最终打印顺序为：