事件循环 分析

1.浏览器常驻线程

• GUI渲染线程：负责渲染页面，与JavaScript引擎线程互斥，即JavaScript引擎线程执行时间过长，可能引起页面渲染阻塞
• JavaScript引擎线程：执行脚本代码，定时器及异步请求成功回调，进入队列，等待此线程进行执行。
• 定时器触发线程：负责执行setTimeout，setInterval异步定时的函数，计时结束交给事件触发线程。
• 事件触发线程：负责将准备好的事件，交给Js执行，例如：定时器结束，ajax成功回调，点击触发的事件，添加到执行队列
• 异步http请求线程：执行异步请求一类的线程，例如：promise,axios,ajax。成功回调都交给事件触发线程。

2.浏览器的Event Loop

浏览器事件循环的流程

执行上下文 --> 同步压栈执行 -->异步挂起（宏任务/微任务） -->宏任务 -->微任务 -->微任务 ……-->栈空 -->结束

例题分析1

    setTimeout(()=>{
        console.log("setTimeout1")
    },0);
    console.log("window");
    new Promise((resolve,reject)=>{
            console.log("promise");
            setTimeout(()=>{
               console.log('setTimeout2');
                resolve();
            },0);
        })
        .then(()=> {
            console.log("promise1")
        })
        .then(()=>{
            console.log("promise2")
        });
    setTimeout(()=>{
        console.log('setTimeout3');
        new Promise((resolve,reject)=>{
            console.log("promise3");
            resolve();
        }).then(()=> {
           console.log("promise4")
        });
    },0);

执行结果

分析：

• window ---- script标签，同步
• promise ---- promise 同步
• 同步任务执行完毕，下面执行异步
• setTimeout1 ---- setTimeout 异步宏
• 无微任务
• setTimeout2 ---- setTimeout 异步宏
• promise1 promise2 ---- resolve链式调用 异步微
• setTimeout3 promise3 ---- setTimeout 异步宏
• promise4 ---promise.then() 异步微

3.Node 的 Event Loop

Node的事件循环的流程

外部输入数据 --> 轮询阶段(poll) --> 检查阶段(check) --> 关闭事件回调阶段(close callback) --> 定时器检测阶段(timer) --> I/O事件回调阶段(I/O callbacks) -->闲置阶段(idle, prepare) --> 轮询阶段（按照该顺序反复运行）...

• timer：这个阶段执行定时器的回调，包括 setTimeout和setInterval ，这个阶段受poll阶段控制。
• I/O callbacks:这个阶段执行除了setImmediate、定时器以及close之外的所有回调。
• idle，prepare：内部使用
• poll：等待新的I/O事件，一般会在这里阻塞。(最重要阶段)
  进入此阶段，分两种情况：
  1. 若没有设定timer，分两种情况：
  • (1). 当poll队列不为空：会执行回调队列，直到队列为空，或者达到系统上限
  • (2). 当poll队列为空，分两种情况：
    • (2.1) 若有setImmediate回调，则poll阶段会停止，并进入check阶段，执行其回调
    • (2.2)若没有setImmediate回调，会等待回调加入队列并立即去执行，会有时间限定，以免一直等待回调加入
  2. 若有设定timer，且poll队列为空的话，会去判断timer是否超时，若超时则回到timer回调执行阶段。
• check：执行setImmediate的回调
• close callbacks：执行像socket.on('close', ...)这种close事件的回调

异步队列也分为宏任务与微任务：

• 常见的 macro-task 比如：setTimeout、setInterval、 setImmediate、script（整体代码）、 I/O 操作等。
• 常见的 micro-task 比如: process.nextTick、new Promise().then(回调)等。

例题分析2

const fs = require('fs')
fs.readFile(__filename, () => {
   setTimeout(() => {
       console.log('timeout');
   }, 0)
   setImmediate(() => {
       console.log('immediate')
   })
})

setImmediate 设计在poll阶段完成时执行，即check阶段；
setTimeout 设计在poll阶段为空闲时，且设定时间到达后执行，但它在timer阶段执行
先输出 immediate，在输出timeout。此段代码，写在I/O阶段，先check阶段，队列空闲且计时到点时，在执行timer阶段。

例题分析2

console.log('start')
setTimeout(() => {
  console.log('timer1')
  Promise.resolve().then(function() {
    console.log('promise1')
  })
}, 0)
setTimeout(() => {
  console.log('timer2')
  Promise.resolve().then(function() {
    console.log('promise2')
  })
}, 0)
Promise.resolve().then(function() {
  console.log('promise3')
})
console.log('end')

node执行结果：start=>end=>promise3=>timer1=>timer2=>promise1=>promise2
浏览器执行结果：start=>end=>promise3=>timer1=>promise1=>timer2=>promise2

分析：

• start ，end ---- script标签内 宏任务
• promise3 --- promise.then() 微任务
• timer1 --- timer阶段，执行回调，将promise1放入微任务队列
• timer2 --- timer阶段，执行回调，将promise2放入微任务队列
• promise1 --- promise.then() 微任务
• promise2 --- promise.then() 微任务

总结

浏览器和Node 环境下，微任务队列的执行时机不同

• Node端，microtask 在事件循环的各个阶段之间执行
• 浏览器端，microtask 在事件循环的 macrotask 执行完之后执行