【个人前端笔记】Event loop和微任务与宏任务

一、Eventloop
Eventloop是指在node.js的事件循环，不是在浏览器中

二、Eventloopd各个阶段

   ┌───────────────────────┐
┌─>│        timers         │     timers 阶段：这个阶段执行 setTimeout 和 setInterval 的回调函数。
│  └──────────┬────────────┘
│             │
│     process.nextTick()
│             │
│  ┌──────────┴────────────┐
│  │     I/O callbacks     │     I/O callbacks 阶段：不在 timers 阶段、close callbacks 阶段和 check 阶段这三个阶段执行的回调，都由此阶段负责，这几乎包含了所有回调函数。
│  └──────────┬────────────┘
│             │
│     process.nextTick()
│             │
│  ┌──────────┴────────────┐
│  │     idle, prepare     │     idle, prepare 阶段（译注：看起来是两个阶段，不过这不重要）：event loop 内部使用的阶段（译注：我们不用关心这个阶段）
│  └──────────┬────────────┘      
│             │
│     process.nextTick()
│             │                   ┌───────────────┐
│  ┌──────────┴────────────┐      │   incoming:   │
│  │         poll          │<─────┤  connections, │     poll 阶段：获取新的 I/O 事件。在某些场景下 Node.js 会阻塞在这个阶段
│  └──────────┬────────────┘      │   data, etc.  │
│             │                   └───────────────┘
│     process.nextTick()
│             │
│  ┌──────────┴────────────┐      
│  │        check          │     check 阶段：执行 setImmediate() 的回调函数。
│  └──────────┬────────────┘
│             │
│     process.nextTick()
│             │
│  ┌──────────┴────────────┐
└──┤    close callbacks    │     close callbacks 阶段：执行关闭事件的回调函数，如 socket.on('close', fn) 里的 fn。
   └───────────────────────┘

以上这些阶段作为前端我们只看timers、poll、check即可

1.poll阶段
当事件循环在poll阶段时，它会在此停留一段事件，具体等多久不知道，
停留这段期间它会去检查timer和check是否有事件需要执行，如果没有就等，有就会尽快进入有事件的阶段去执行事件

2.check阶段
node.js有一个函数，叫setImmediate，这个函数的执行时机就是在check阶段里
如果在poll阶段轮询发现check有事件需要执行，那么poll会尽快来到该阶段执行事件

3.timers阶段
timers阶段会执行 setTimeout 和 setInterval 的回调函数

面试题1：一段代码中有settimeout事件执行时间设置为0和setImmediate，请问哪个事件先执行
答：不确定，但大概率会执行setImmediate，因为事件循环很大概率会在poll阶段停留，如果此时同时有该两个事件，会先去check阶段，再去timers阶段

三、nexttick函数
nexttick函数会在每个阶段结束之前执行，实际上nexttick并不在Eventloop当中

四、宏任务和微任务
在chrome里，只有微任务和宏任务
可以把微任务当做是“马上”
宏任务当做是“一会儿”

宏任务中出先微任务，先做微任务，再做宏任务

宏任务就是settimeout和setimmeate函数
微任务就是promise后面的.then以及.catch

五、await转换成promise

题目

async function async1() {
     console.log(1);
     await async2();
     console.log(2);
 }
async function async2() {
    console.log(3)
}

async1();

new Promise(function (resolve) {
    console.log(4);
    resolve();
}).then(function () {
    console.log(5);
});

分析
1.前两个都是声明async函数，略过
2.执行async1函数，然后打印出1。
3.await async2()，将其转换成promise
即
promise.resolve(async2).then(() => console.log(2))

所以先打印出3，然后将await async2()下面以后的函数放进微任务队列里

4.执行new Promise，将promise函数里面的回调执行，然后then函数里面的回调放进微任务
5.主要的js代码执行完，开始执行微任务
6.之前await async2()下面的代码先放进微任务队列里，所以先打印出3
7.然后执行下面的then函数里面的回调，打印出5

答案：1 3 4 2 5