js Event Loop 事件循环

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了js Event Loop 事件循环相关的知识,希望对你有一定的参考价值。

参考技术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(关闭回调,不常用)和那些由 timerssetImmedieate() 调度的回调。
  • 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

以上是关于js Event Loop 事件循环的主要内容,如果未能解决你的问题,请参考以下文章

JS基础:Event loop事件循环解析

js事件循环机制(Event Loop)

同步异步和Event loop事件循环

JS 事件循环 event loop

js Event Loop 事件循环

惊艳!可视化的 js:动态图演示 - 事件循环 Event Loop