这篇文章主要整理一下自己对于js中事件循环,同步,异步,宏任务,微任务的理解。也是面试中经常会出现的一道题型,以下仅为我个人的理解,也是我第一次写文章给大家分享,可能会有些偏差或错误,如果有十分欢迎各位指出,好了废话不多说我们往下看。
首先呢我们都知道js是一个单线程的语言,如果前一个任务非常耗时,则后续的任务就不得不一直等待,这样就会在任务多的情况下出现拥挤,为了解决这个问题js把任务分为了同步和异步两类。
同步任务指的是,在主线程上排队执行的任务,只有前一个任务执行完毕,才能执行后一个任务;异步任务指的是,不进入主线程、而进入"任务队列"的任务,只有等主线程任务执行完毕,"任务队列"开始通知主线程,请求执行任务,该任务才会进入主线程执行。“任务队列”又分为了宏任务和微任务,并且微任务的优先级要高于宏任务。
宏任务微任务执行顺序概括
微任务和宏任务的执行顺序是先执行同步任务,先执行同步后异步,异步分为宏任务和微任务两种,异步遇到微任务先执行微任务,执行完后如果没有微任务,就执行下一个宏任务
那哪些是宏任务哪些是微任务呢
常见的定时器setTimeout、setInterval这些就属于宏任务,promise、async这些就属于微任务。
说了这么多文字不如直接结合案例分析,我们直接上代码
eg1:
async function async1() {
console.log('async1 start');
await async2();
console.log('async1 end');
}
async function async2() {
console.log('async2');
}
console.log('script start');
setTimeout(function () {
console.log('setTimeout');
}, 0)
async1();
new Promise(function (resolve) {
console.log('promise1');
resolve();
}).then(function () {
console.log('promise2');
});
console.log('script end');
// script start, async1 start, async2, promise1, script end, async1 end, promise2, setTimeout
分析:
遇到同步任务console.log('script start');输出script start;
遇到setTimout,异步宏任务,放入宏任务队列中;
遇到async1函数调用,console.log('async1 start');输出async1 start,然后执行await后面的async2函数console.log('async2');输出async2;await下面的属于异步微任务将其放入微任务队列中;
遇到new Promise,new Promise在实例化的过程中所执行的代码都是同步进行的,所以输出promise1
Promise.then,异步微任务,将其放入微任务队列中;
遇到同步任务console.log('script end');输出script end;主线程中同步任务执行完
从微任务队列中取出任务到主线程中,输出async1 end、 promise2,微任务队列为空
从宏任务队列中取出任务到主线程中,输出setTimeout,宏任务队列为空
tips:在async里面await之前的是属于同步任务而await下面的是属于微任务;
eg2:
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里的resolve中的代码是同步的,输出2;
而Promise.then,异步微任务,将其放入微任务队列中;
遇到同步任务console.log(5),输出5;主线程中同步任务执行完;
从微任务队列中取出任务到主线程中,输出3,4微任务队列为空;
从宏任务队列中取出任务到主线程中,输出1,宏任务队列为空;
eg3:
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,微任务队列为空;
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,异步微任务,被分发到微任务队列中;
遇到setTimeout,异步宏任务;放入宏任务队列中;
遇到同步任务console.log(10);输出10,主线程中同步任务全部执行完;
从微任务队列中取出任务到主线程中,输出6;
在从宏任务队列中取出任务到主线程中,执行第一个setTimeout,输出2,3,4(在宏任务中执行同步,同步,异步微任务);
在执行第二个setTimeout,输出7,8,9;
eg5:
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,异步微任务,被分发到微任务队列中;
遇到同步任务console.log(3);输出3;
主线程中同步任务执行完,从微任务队列中取出任务到主线程中,p.then 输出4,微任务执行完毕,任务队列为空;
开始执行宏任务setTimeout 输出2,宏任务队列为空;
结语:
以上就是对于宏任务和微任务执行顺序的一个理解了,文章到这里也就结束啦,整理不易,路过的老铁可以帮忙点个赞,如果你有更好的想法也可以分享一下。