js的宏任务和微任务

这篇文章主要整理一下自己对于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,宏任务队列为空；

结语：

以上就是对于宏任务和微任务执行顺序的一个理解了，文章到这里也就结束啦，整理不易，路过的老铁可以帮忙点个赞，如果你有更好的想法也可以分享一下。