乐趣区

关于javascript:我是这样理解EventLoop的

jiezi

我是这样了解 EventLoop 的

一、前言

  家喻户晓，在应用 javascript 时，常常须要思考程序中存在异步的状况，如果对异步考虑不周，很容易在开发中呈现技术谬误和业务谬误。作为一名合格的 javascript 使用者，理解异步的存在和运行机制非常重要且有必要；那么，异步到底是何方神圣呢？咱们不得不提 Event Loop: 也叫做事件循环，是指浏览器或 Node 环境的一种解决 javaScript 单线程运行时不会阻塞的一种机制，也就是实现异步的原理。作为一种单线程语言，javascript 自身是没有异步这一说法的，是由其宿主环境提供的 （EventLoop 优良文章网上有很多，这篇文章是本人的整合和了解）。
留神：Event Loop 并不是在 ECMAScript 规范中定义的，而是在 HTML 规范中定义的；

二、Event Loop 常识铺垫

  javascript代码运行时，工作被分为两种，宏工作（MacroTask/Task）和 微工作（MircoTask）；Event Loop在执行和协调各种工作时也将工作队列分为 Task Queue 和MircoTak Queue别离对应治理 宏工作（MacroTask/Task）和 微工作（MircoTask）；作为队列，Task Queue和 MircoTak Queue 也具备队列个性：先进先出（FIFO—first in first out）。

1、微工作（MircoTask）

  在 HTML 规范中，并没有明确规定 Microtask，然而理论开发中蕴含以下四种：

  • Promise 中的then、catch、finally（原理参考：【js 进阶】手撕 Promise，一码一解析 包懂）
  • MutationObserver（监督 DOM 变动的 API，详情参考 MDN）
  • Object.observe(废除：监听规范对象的变动)
  • Process.nextTick（Node 环境，通常也被认为是微工作）

2、宏工作（MacroTask/Task）

  基本上，咱们将 javascript 中 非微工作（MircoTask）的所有工作都归为宏工作，比方：

  • script 中全副代码
  • DOM 操作
  • 用户交互操作
  • 所有的网路申请
  • 定时器相干的 setTimeout、setInterval 等
  • ···

3、javascript runtime

  javascript runtime：为 JavaScript 提供一些对象或机制，使它可能与外界交互，是 javascript 的执行环境。javascript 执行时会创立一个 main thread 主线程 和call-stack 调用栈 (执行栈，遵循后进先出的规定)， 所有的工作都会被放到调用栈 / 执行栈期待主线程执行。其运行机制如下：

  • 1）主线程自上而下顺次执行所有代码；
  • 2）同步工作间接进入到主线程被执行；
  • 3）异步工作进入到Event Table，当异步工作有后果后，将绝对应的回调函数进行注册，放入Event Queue；
  • 4）主线程工作执行完闲暇下来后，从 Event Queue（FIFO） 中读取工作，放入主线程执行；
  • 5）放入主线程的 Event Queue 工作持续从第一步开始，如此循环执行；

上述步骤执行过程就是咱们所说的事件循环(Event Loop)，上图展现了事件循环中的一个残缺循环过程。

三、浏览器环境的 Event Loop

  不同的执行环境中，Event Loop 的执行机制是不同的；例如 Chrome 和 Node.js 都应用了 V8 Engine：V8 实现并提供了 ECMAScript 规范中的所有数据类型、操作符、对象和办法（留神并没有 DOM）。但它们的 Runtime 并不一样：Chrome 提供了 window、DOM，而 Node.js 则是 require、process 等等。咱们在理解浏览器中 Event Loop 的具体表现前须要先整顿同步、异步、微工作、宏工作之间的关系！

1、同步、异步 和 宏工作、微工作

  看到这里，可能会有很多纳闷：同步异步很好了解，宏工作微工作下面也进行了分类，然而当他们四个在一起后就感觉很凌乱了，冥冥之中感觉同步异步和宏工作微工作有内在联系，然而他们之间有分割吗？又是什么分割呢？网上有的文章说宏工作就是同步的，微工作就是异步的 这种说法显著是错的！
  其实我更违心如此形容： 宏工作和微工作是相对而言的，依据代码执时循环的先后，将代码执行分层了解，在每一层（一次）的事件循环中，首先整体代码块看作一个宏工作，宏工作中的 Promise（then、catch、finally）、MutationObserver、Process.nextTick 就是该宏工作层的微工作；宏工作中的同步代码进入主线程中立刻执行的，宏工作中的非微工作异步执行代码将作为下一次循环的宏工作时进入调用栈期待执行的；此时，调用栈中期待执行的队列分为两种，优先级较高先执行的本层循环微工作队列（MicroTask Queue），和优先级低的上层循环执行的宏工作队列（MacroTask Queue）！
留神：每一次 / 层循环，都是首先从宏工作开始，微工作完结;

2、简略实例剖析

下面的描叙绝对拗口，联合代码和图片剖析了解：

  答案临时不给出，咱们先进行代码剖析：这是一个简略而典型的 双层循环 的事件循环 执行案例，在这个循环中能够依照以下步骤进行剖析：

  • 1、首先辨别出该层 宏工作 的范畴（整个代码）；
  • 2、辨别 宏工作 中同步代码 和异步代码

同步代码：console.log('script start');、console.log('enter promise');和 console.log('script end');；
异步代码块：setTimeout和 Promise 的 then（ 留神：Promise 中只有 then、catch、finally 的执行须要等到后果，Promise 传入的回调函数属于同步执行代码）;

  • 3、在 异步 中找出同层的 微工作 （代码中的Promise 的 then）和上层事件循环的 宏工作（代码中的setTimeout）
  • 4、宏工作 的同步代码优先进入主线程，依照自上而下程序执行结束；

输入程序为：

// 同步代码执行输入
script start
enter promise
script end
  • 5、当主线程闲暇时，执行该层的 微工作
// 同层微工作队列代码执行输入
promise then 1
promise then 2
  • 6、首层事件循环完结，进入第二层事件循环（setTimeout蕴含的执行代码，只有一个同步代码）
// 第二层宏工作队列代码执行输入
setTimeout

综合剖析最终得出数据后果为：

// 首层宏工作代码执行输入
script start
enter promise
script end
// 首层微工作队列代码执行输入
promise then 1
promise then 2
// 第二层宏工作队列代码执行输入
setTimeout

3、简单案例剖析

  那么，你是否曾经理解上述执行过程了呢？如果齐全了解上述实例，阐明你曾经大略晓得浏览器中 Event Loop 的执行机制，然而，要想晓得本人是不是齐全明确，无妨对于下列多循环的事件循环进行剖析测验，给出你的后果：

console.log('1');

setTimeout(function() {console.log('2');
    new Promise(function(resolve) {console.log('3');
        resolve();}).then(function() {console.log('4')
    })
    setTimeout(function() {console.log('5');
        new Promise(function(resolve) {console.log('6');
            resolve();}).then(function() {console.log('7')
        })
    })
    console.log('14');
})

new Promise(function(resolve) {console.log('8');
    resolve();}).then(function() {console.log('9')
})

setTimeout(function() {console.log('10');
    new Promise(function(resolve) {console.log('11');
        resolve();}).then(function() {console.log('12')
    })
})
console.log('13')

剖析：如下图草稿所示，左上角标 a 为宏工作队列，左上角标 i 为微工作队列，同一层循环中，本层宏工作先执行，再执行微工作；本层宏工作中的非微工作异步代码块作为上层循环的宏工作进入下次循环，如此循环执行；

如果你的与上面的后果统一，祝贺你 浏览器环境的 Event Loop你曾经齐全把握，那么请开始上面的学习：

1->8->13->9->2->3->14->4->10->11->12->5->6->7

四、Node 环境下的 Event Loop

  在 Node 环境下，浏览器的 EventLoop 机制并不实用，切记不能一概而论。这里借用网上很多博客上的一句总结（其实我也是真不太懂）：Node中的 Event Loop 是基于 libuv 实现的：libuv是 Node 的新跨平台形象层，libuv应用异步，事件驱动的编程形式，外围是提供 i/o 的事件循环和异步回调。libuv的 API 蕴含有工夫，非阻塞的网络，异步文件操作，子过程等等。

1、Event Loop 的 6 阶段

  Node 的 Event loop 一共分为 6 个阶段，每个细节具体如下：

  • timers: 执行 setTimeout 和 setInterval 中到期的 callback。
  • pending callback: 上一轮循环中多数的 callback 会放在这一阶段执行。
  • idle, prepare: 仅在外部应用。
  • poll: 最重要的阶段，执行 pending callback，在适当的状况下回阻塞在这个阶段。
  • check: 执行 setImmediate 的 callback。
  • close callbacks: 执行 close 事件的 callback，例如 socket.on(‘close'[,fn])或者 http.server.on(‘close, fn)。

留神：下面六个阶段都不包含 process.nextTick()

重点：如上图所，在 Node.js 中，一次宏工作能够认为是蕴含上述 6 个阶段、微工作 microtask 会在事件循环的各个阶段之间执行，也就是一个阶段执行结束，就会去执行 microtask 队列的工作。

2、process.nextTick()

  在第二节中就理解到，process.nextTick()属于微工作，然而这里须要重点提及下：

  • process.nextTick()尽管它是异步 API 的一部分，但未在图中显示。因为 process.nextTick() 从技术上讲，它不是事件循环的一部分；
  • 当每个阶段实现后，如果存在 nextTick，就会清空队列中的所有回调函数，并且优先于其余 microtask 执行（能够了解为微工作中优先级最高的）

3、实例剖析

  老规矩，线上代码：

console.log('1');

setTimeout(function() {console.log('2');
    process.nextTick(function() {console.log('3');
    })
    new Promise(function(resolve) {console.log('4');
        resolve();}).then(function() {console.log('5')
    })
})
process.nextTick(function() {console.log('6');
})
new Promise(function(resolve) {console.log('7');
    resolve();}).then(function() {console.log('8')
})

setTimeout(function() {console.log('9');
    process.nextTick(function() {console.log('10');
    })
    new Promise(function(resolve) {console.log('11');
        resolve();}).then(function() {console.log('12')
    })
})
console.log('13')

将代码的执行分区进行解释

剖析：如下图草稿所示，左上角标 a 为宏工作队列，左上角标 i 为微工作队列 ， 左上角标 t 为 timers 阶段队列 ， 左上角标 p 为 nextTick 队列 同一层循环中，本层宏工作先执行，再执行微工作；本层宏工作中的非微工作异步代码块作为上层循环的宏工作进入下次循环，如此循环执行：

  • 1、整体代码 能够看做宏工作，同步代码间接进入主线程执行，输入1，7，13，接着执行同层微工作且 nextTick 优先执行输入6，8；
  • 2、二层中宏工作中只存在 setTimeout，两个 setTimeout 代码块顺次进入 6 阶段中的 timer 阶段 以t1、t2进入队列；代码等价于：
setTimeout(function() {console.log('2');
    process.nextTick(function() {console.log('3');
    })
    new Promise(function(resolve) {console.log('4');
        resolve();}).then(function() {console.log('5')
    })
})

setTimeout(function() {console.log('9');
    process.nextTick(function() {console.log('10');
    })
    new Promise(function(resolve) {console.log('11');
        resolve();}).then(function() {console.log('12')
    })
})
  • 3、setTimeout中的同步代码立刻执行输入 2，4，9，11，nextTick 和Pormise.then进入微工作执行输入3，10，5，12；
  • 4、二层中不存在 6 阶段中的其余阶段，循环结束，最终输入后果为：1->7->13->6->8->2->4->9->11->3->10->5->12；

4、当堂小考

console.log('1');

setTimeout(function() {console.log('2');
    process.nextTick(function() {console.log('3');
    })
    new Promise(function(resolve) {console.log('4');
        resolve();}).then(function() {console.log('5')
        setTimeout(function() {console.log('6');
          process.nextTick(function() {console.log('7');
          })
          new Promise(function(resolve) {console.log('8');
              resolve();}).then(function() {console.log('9')
          })
      })
    })
})
process.nextTick(function() {console.log('10');
})
new Promise(function(resolve) {console.log('11');
    resolve();}).then(function() {console.log('12')
    setTimeout(function() {console.log('13');
      process.nextTick(function() {console.log('14');
      })
      new Promise(function(resolve) {console.log('15');
          resolve();}).then(function() {console.log('16')
      })
  })
})

setTimeout(function() {console.log('17');
    process.nextTick(function() {console.log('18');
    })
    new Promise(function(resolve) {console.log('19');
        resolve();}).then(function() {console.log('20')
    })
})
console.log('21')

五、总结

  浏览器 和 Node 环境下，microtask 工作队列 的执行机会不同：Node 端，microtask 在事件循环的各个阶段之间执行；浏览器端，microtask 在事件循环的 macrotask 执行完之后执行；

参考借鉴

  • 深刻了解 JavaScript Event Loop
  • 这一次，彻底弄懂 JavaScript 执行机制
  • 【THE LAST TIME】彻底吃透 JavaScript 执行机制
退出移动版