初识js宏队列，微队列

我们都知道异步是js的核心理念之一。但是在我使用的过程中我会发现，在多个异步同时进行的时候，如何判断他们的执行顺序就是一个很关键的问题。
这里就涉及到Event-Loop（事件循环），task(宏任务)，Microtasks（微任务）。

事件循环（Event-Loop）

首先来看一段异步的代码

  console.log('start')

  setTimeout(()=>{
    console.log('time')
  },0)

  console.log('end')
  //输出start,end,time

这里的setTimeout就是一个典型的异步函数，在外层两个console依次执行完之后在执行

js的机制是先运行同步的任务，将异步的任务挂着，等待同步的任务执行完之后在执行。
同步任务执行完成之后，执行异步任务，在异步任务内继续该循环。这就是js的事件循环机制。

  console.log('start');

    setTimeout(() => {
        console.log('1');
        setTimeout(() => {
            console.log('2');
        }, 0);
        console.log(`3`);
    }, 0);

    console.log('end');
//输出1,3,2

在这个例子中我们看出在setTimeout里面的setTimeout函数也是遵循着这一规定。

我们在看一个层次多一点的例子

  console.log('start');

    const out1 = setTimeout(() => {
        console.log('1');

        const inner1 = setTimeout(() => {
            console.log('2');

            const inner2 = setTimeout(() => {
                console.log('3');
            }, 0);

            console.log('4');
        }, 0);

        console.log(`5`);
    }, 0);

    const out2 = setTimeout(() => {
        console.log('6');
    }, 0);

    console.log('end');
//输出1,5,6,2,4,3

1.执行同步的任务，打印出start,end，将外层的out1,out2函数放入微队列
2.执行微队列，执行out1函数，打印1，5，将inner1放入微队列
3.执行out2，打印6
4.执行inner1,打印2，4，将inner2放入异步队列

这就是一个事件循环的例子

宏任务（task）和微任务(Microtasks)

宏任务

宏任务一般是用来执行一些主线的任务，在两次宏任务的间隙，会进行页面的渲染。
宏任务1===>渲染===>宏任务2 ...

以下异步函数是归于宏任务的
setTimeout
setInterval
setImmediate (Node)
requestAnimationFrame (浏览器)
I/O

微任务

微任务一般是用来更新程序的状态，一般需要在本次宏任务结束之后立即执行的。
微任务在页面渲染之前执行，用来减少程序的重新渲染

以下异步函数是归于微任务的
process.nextTick (Node)
Promise.then()
catch
finally
Object.observe
MutationObserver

宏任务中的微任务是在当前宏任务完成之后马上执行的，我们可以将整个js程序看作第一个宏程序，在第一次结束宏任务之后会调用里面的微任务。
（js主程序==>主程序中的微任务==>宏任务1==>宏任务1中的微任务==>宏任务中的微任务2==>宏任务2...）

    console.log('start');

    const out1 = setTimeout(() => {
        console.log('1');
        console.log(`2`);
    }, 0);

    const p1 = new Promise((resolve) => {
        resolve();
        console.log(`3`);
    });

    p1.then((a: any) => {
        console.log(`4`);
    });

    console.log('end');

//打印start,3,end,4,1,2

在执行了主程序之后，将p1.then放入了微任务队列，将out1放入了宏任务队列，执行p1.then然后执行out1这和我们上文所描述的顺序是相同的

    console.log('start');

    const out1 = setTimeout(() => {
        console.log('1');
        new Promise((resolve) => {
            resolve();
        }).then((res) => {
            console.log(`2`);
        });
        console.log(`3`);
    }, 0);

    const out2 = setTimeout(() => {
        console.log('4');
        new Promise((resolve) => {
            resolve();
        }).then((res) => {
            console.log(`5`);
        });
        console.log(`6`);
    }, 0);

    const p1 = new Promise((resolve) => {
        resolve();
        console.log(`7`);
    });

    p1.then((a) => {
        console.log(`8`);
    });

    console.log('end');
//打印start,7,end,8,1,3,4,6,2,5

1.在执行了主程序之后，将out1,out2放入了宏任务队列，将p1.then放入了微任务队列
2.执行p1.then
3.然后执行out1，将out1中的promise放入微任务队列
4.执行out1中的promise
5.执行out2，将out2中的promise放入微任务队列
6.执行out2中的promise

最后编辑于：2021.03.04 15:31:15