文章目录
1.微任务和宏任务概念
js 是一种单线程语言，简单的说就是：只有一条通道，那么在任务多的情况下，就会出现拥挤的情况，这种情况下就产生了 '多线程' ，但是这种"多线程"是通过单线程模仿的，也就是假的。那么就产生了同步任务和异步任务。而异步任务就分为了微任务和宏任务两类。
2.微任务和宏任务区分
（1）js是单线程的，但是分同步异步
（2）微任务和宏任务皆为异步任务，它们都属于一个队列
（3）宏任务一般是：script、setTimeout、setInterval、postMessage
（4）微任务：Promise.then ES6、、Object.observer、MutationObserver、process.nextTick
（5）先执行同步再执行异步，异步遇到微任务，先执行微任务，执行完后如果没有微任务，就执行下一个宏任务，如果有微任务，就按顺序一个一个执行微任务
3.微任务和宏任务执行
执行顺序：先执行同步代码，遇到异步宏任务则将异步宏任务放入宏任务队列中，遇到异步微任务则将异步微任务放入微任务队列中，当所有同步代码执行完毕后，再将异步微任务从队列中调入主线程执行，微任务执行完毕后再将异步宏任务从队列中调入主线程执行，一直循环直至所有任务执行完毕。
4.微任务和宏任务案例
4.1.eg1
//宏任务 放进队列
setTimeout(function(){
console.log(1);
});
//微任务
new Promise(function(resolve){
console.log(2);
resolve();
}).then(function(){
console.log(3);
}).then(function(){
console.log(4)
});
//同步代码
console.log(5);
// 2 5 3 4 1
分析：
遇到setTimout，异步宏任务，放入宏任务队列中
遇到new Promise，new Promise在实例化的过程中所执行的代码都是同步进行的，所以输出2
Promise.then，异步微任务，将其放入微任务队列中
遇到同步任务console.log(5);输出5；主线程中同步任务执行完
从微任务队列中取出任务到主线程中，输出3、 4，微任务队列为空
从宏任务队列中取出任务到主线程中，输出1，宏任务队列为空
4.2.eg2
setTimeout(()=>{
new Promise(resolve =>{
resolve();
}).then(()=>{
console.log('test');
});
console.log(4);
});
new Promise(resolve => {
resolve();
console.log(1)
}).then( () => {
console.log(3);
Promise.resolve().then(() => {
console.log('before timeout');
}).then(() => {
Promise.resolve().then(() => {
console.log('also before timeout')
})
})
})
console.log(2);
//1，2，3，before timeout，also before timeout，4，test;
分析：
遇到setTimeout，异步宏任务，将() => {console.log(4)}放入宏任务队列中；
遇到new Promise，new Promise在实例化的过程中所执行的代码都是同步进行的，所以输出1；
而Promise.then，异步微任务，将其放入微任务队列中
遇到同步任务console.log(2)，输出2；主线程中同步任务执行完
从微任务队列中取出任务到主线程中，输出3，此微任务中又有微任务，Promise.resolve().then(微任务a).then(微任务b)，将其依次放入微任务队列中；
从微任务队列中取出任务a到主线程中，输出 before timeout；
从微任务队列中取出任务b到主线程中，任务b又注册了一个微任务c，放入微任务队列中；
从微任务队列中取出任务c到主线程中，输出 also before timeout；微任务队列为空
从宏任务队列中取出任务到主线程，此任务中注册了一个微任务d，将其放入微任务队列中，接下来遇到输出4，宏任务队列为空
从微任务队列中取出任务d到主线程 ，输出test，微任务队列为空
4.3.eg3
console.log(1)
setTimeout(function() {
console.log(2)
}, 0)
const p = new Promise((resolve, reject) => {
resolve(4)
})
p.then(data => {
console.log(data)
})
console.log(3)
//1，3，4，2
分析
遇到同步任务console.log(1);输出1；
遇到setTimeout 异步宏任务，放入宏任务队列中；
遇到 Promise，new Promise在实例化的过程中所执行的代码都是同步进行的，但由于new Promise没有输出事件，所以接着执行遇到.then；
执行.then，异步微任务,被分发到微任务Event Queue中；
遇到同步任务console.log(3);输出3；
主线程中同步任务执行完，从微任务队列中取出任务到主线程中，p.then 输出4,微任务执行完毕，任务队列为空；
开始执行宏任务setTimeout 输出2,宏任务队列为空；
4.4.eg4
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
分析
遇到同步任务console.log(1);输出1；
遇到setTimeout 异步宏任务，放入宏任务队列中；
遇到 Promise，new Promise在实例化的过程中所执行的代码都是同步进行的，所以输出5，所以接着执行遇到.then；
执行.then，异步微任务,被分发到微任务Event Queue中；
遇到setTimeout，异步宏任务;放入宏任务队列中；
遇到同步任务console.log(10);输出10,主线程中同步任务全部执行完;
从微任务队列中取出任务到主线程中，输出6；
在从宏任务队列中取出任务到主线程中，执行第一个setTimeout，输出2，3，4（在宏任务中执行同步,同步，异步微任务）;
在执行第二个setTimeout，输出7，8，9（和8同理）；
4.5.eg5
new Promise((resolve, reject) => {
resolve(1)
new Promise((resolve, reject) => {
resolve(2)
}).then(data => {
console.log(data)
})
}).then(data => {
console.log(data)
})
console.log(3)
//3，2，1
分析
遇到Promise,new Promise在实例化的过程中所执行的代码都是同步进行的,但由于new Promise没有输出事件，所以接着往下执行遇到new Promise没有输出事件再接着往下执行遇到.then,异步微任务,被分发到微任务Event Queue中，再接着 .then 放入微任务
遇到同步任务console.log(3) 输出3，主线程中同步任务执行完；
从微任务队列中取出任务到主线程中，输出2，1，微任务执行完毕，任务队列为空。
小结
微任务和宏任务的执行顺序是先执行同步任务，先执行同步后异步，异步分为宏任务和微任务两种，异步遇到微任务先执行微任务，执行完后如果没有微任务，就执行下一个宏任务。