js Event Loop 事件循环

Posted 2023-03-23

参考技术A

Event Loop即事件循环，是解决javaScript单线程运行阻塞的一种机制。 主要是为了协调单线程下，事件、用户交互、脚本、UI 渲染和网络处理等行为，防止主线程的不阻塞。

因为javascript 是单线程，也就是说， 所有任务需要排队，前一个任务结束，才会执行后一个任务。

但是IO设备（输入、出设备）可能会因为网络等因数导致速度很慢（比如Ajax）继而CPU没有充分利用，所以设计者将IO设备的任务挂起，先执行后面的任务，等到IO设备返回了结果，再回过头，把挂起的任务继续执行下去。于是，就把所有任务分成两种，一种是同步任务（synchronous），另一种是异步任务（asynchronous）。

只有前一个任务执行完毕，才能执行后一个任务；直接在主线程上排队执行且最先执行，形成一个执行栈

不进入主线程、而是进入"任务队列"（task queue）的任务，只有"任务队列"通知主线程，某个异步任务可以执行了，该任务才会进入主线程执行。

（1）所有同步任务都在主线程上执行，形成一个执行栈（execution context stack）。
（2）主线程之外，还存在一个"任务队列"（task queue）。只要异步任务有了运行结果，就在"任务队列"之中放置一个事件。
（3）一旦"执行栈"中的所有同步任务执行完毕，系统就会读取"任务队列"，执行一个宏任务， 执行过程中如果遇到微任务，就将它添加到微任务的任务队列中 宏任务执行完毕后，再依次执行执行当前微任务队列中的所有微任务，当前宏任务执行完毕，开始检查渲染，然后GUI线程接管渲染 渲染完毕后，JS线程继续接管，开始下一个宏任务（从事件队列中获取）
（4）主线程不断重复上面的第三步。

"任务队列"是一个先进先出的数据结构，也是一个事件的队列（也可以理解成消息的队列），IO设备完成一项任务，就在"任务队列"中添加一个事件，表示相关的异步任务可以进入"执行栈"了。主线程读取"任务队列"，就是读取里面有哪些事件。

"任务队列"中的事件，除了IO设备的事件以外，还包括一些用户产生的事件（比如鼠标点击、页面滚动等等）。只要指定过回调函数，这些事件发生时就会进入"任务队列"，等待主线程读取。

所谓"回调函数"（callback），就是那些会被主线程挂起来的代码。异步任务必须指定回调函数，当主线程开始执行异步任务，就是执行对应的回调函数。

例子1

例子2：

例子3：

nodejs事件循环和浏览器的事件循环不一样的。 浏览器的Event loop是在html5中定义的规范，而node中则由libuv库实现

node.js事件循环 event loop

Nodejs事件循环 (event loop)

node.js 事件循环的概念

当node.js 启动的时候会初始化eventloop ，每一个evnet loop 都会包含如下6个循环阶段，node.js 事件循环和浏览器事件循环完全不一样。

官网文档：https://nodejs.org/zh-cn/docs/guides/event-loop-timers-and-nexttick/

• timers
• pending callbacks (I/O callbakcs)
• idle, prepare

• poll

  • connections
  • incoming
  • data, etc
• check

• close callbacks

阶段概述

• times（定时器）：此阶段执行那些由 setTimeout()和setInval() 调度的回调函数。
• pending callbacks (I/O 回调)：此阶段几乎会执行几乎所有的回调函数，除了close callbacks（关闭回调，不常用）和那些由 timers 与 setImmedieate() 调度的回调。
• idle, prepare（空转）: 此阶段只在内部使用。
  
• poll（轮询）： 检索新的 I/O 事件，在恰当的时候 Node 会阻塞在这个阶段。(此阶段比较复杂也是nodejs的核心 )
• check（检查）： setImmediate()设置的回调会在此阶段执行。
• c lose callbacks（关闭事件的回调）： 诸如 secket.on(close, ...) 此类的回调在此阶段被调用。

setImmediate是什么？

setImmediate 约等于 setTimeout( callback , 0)

setImmediate(() => {
    console.log(2222)
})

console.log(1111)

// 打印结果
1111
2222

在事件循环的每次运行之间，Node.js 会检查它是否在等待异步 I/O 或定时器，如果没有的话就会自动关闭。

如果event loop 进入 poll 阶段，且代码未设定timer，将会发生下面的情况：

• 如果 poll queue 不为空， event loop 将同步的执行 queue 里的 callback ，直至 queue 为空，或执行的 callback 到达系统上限。
• 如果 poll queue 为空，将会发生下面情况：
  • 如果代码已经被 setImmediate() 设定了 callback ，event loop 将结束poll阶段进入 check 阶段，并执行 check 阶段的 queue （check 阶段的 callback 是 setImmediate 设定的）
  • 如果代码没有设定 setImmediate(callback) ， event loop 将阻塞在该阶段等待 callbacks 假如poll queue 一旦到达就立即执行。

如果evnet loop 进入 poll 阶段，且代码设定了 timer：

• 如果 poll queue 进入空状态时（即poll 阶段为空闲状态）， event loop 将检查timers，如果有一个或多个timers 时间已经到达，event loop 将按循环顺序进入timers阶段，并执行 timer queue。

## 执行顺序

如果setTimeout 为0，实际执行时间是多少？

在nodejs中，如果setTimeout 为 0， 那么它的执行时间最少是1ms

在浏览器中，如果setTimeout 为0， 那么它的执行时间最少是 4ms

为什么 setImmediate() 与 setTimeout() 一起执行时，他们的执行顺序不确定？

setImmediate(()=>{
    console.log(111)
})

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

// 111 222
// 222 111
两种情况都有

这是因为event loop 启动需要时间，而在这个启动时间具有不确定性，导致了代码执行顺序的差异。他们的执行顺序取决于event loop 的启动速度。

如果 event loop 启动后从 timer到 I/O 再到 poll 阶段 如果用了 1.5ms ，那么 timeout 的时间已经到了这是settimeout就会先执行。这时打印顺序是 222 111

如果event loop 启动后从 timer到 I/O 再到 poll 阶段 如果用了 0.8ms ，这时timeout实际执行是1ms，这时poll就会跳过timeout 进入 check 阶段执行 setImmediate。而check执行完，进入第二轮时间循环后就会执行timeout了。这时打印顺序是 111 222

process.nextTick()

process.nextTick() 不在event loop 的任何阶段，而是各个阶段切换的中间执行，即从一个阶段切换到下一个阶段前，穿插着执行。

设计原因

允许开发者通过递归调用process.nextTick() 来阻塞 I/O 操作。

应用场景

1. 在多个事件里交叉执行CPU运算密集型任务：

const http = require('http')

function compute(){
    process.nextTick(compute)
}

http.createServer((req, res) => {
    // http服务请求的时候，还能抽空进行一些计算
    res.writeHead(200, {
        'Content-Type': 'text/plain'
    })
    res.end('hello word')
}).listen(3000, '127.0.0.1')

compute()

在这种模式下不需要递归调用compute()，只需要在事件循环中使用process.nextTick() 定义compute() 在下一个时间点执行即可。在这个过程中，如果新的http请求进来，时间循环机制会先处理新的请求，然后再调用compute , 反之，如果直接把compute()放在递归调用里，系统会一直阻塞在compute() 里，无法处理新的http请求。

1. 保持回调函数异步执行的原则

   当给一个函数定义回调时，要确保这个回调函数是被异步执行的。而下面这个例子就违反了这一原则。

   function asyncFake(data, callback) {
       if(data === 'foo') {
           callback(true)
       }
       else{
         callback(false)
       }
   }
   
   asyncFake('bar', result => {
       // this callback is actually called asynchronously!
   })

在node.js 中有这样一段代码

const client = net.connect(8000, () => {
  client.write('hello wrod')
})

上面代码因为某种原因， net.connect() 变成了同步执行，回调函数就会被立刻执行，因此回调函数写到客户端的变量就永远不会初始化了。在这种情况下就可以使用process.nextTick()把回调函数编程异步执行。

const client = net.connect(8000, () => {
  process.nextTick(()=> {
    clllback(data === 'foo')
  })
})

1. 用在事件触发过程中

EventEmitter 有2个比较核心的方法，on和emit，node自带发布/订阅模式

// nodejs 的发布订阅
const EventEmitter = require('events').EventEmitter

class App extends EventEmitter{

}

var app = new App()

// on 订阅
app.on('start', () => {
    console.log('start')
})

// emit 触发 是个同步的方法
app.emit('start')

console.log('111')

process.nextTick() 与 setTimeout 和 setImmediate 的执行顺序

process.nextTick()的执行时间是不确定的,如果在执行过程中会穿插在每个阶段。

const fs = require('fs')
const path = require('path')

fs.readFile(path.resolve(__dirname, "/1.js"),  ()=> {

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

    setImmediate(() => {
        console.log('2.immediate')
    })

    process.nextTick(() => {
        console.log('3.nextTick')
    })

    process.nextTick(() => {
        console.log('4.nextTick')
    })
})

// 打印结果
3.nextTick
4.nextTick
2.immediate
1.timeout