[nodejs基础]eventloop机制图解

Posted 2021-03-29 豆子前端笔记

Node.js 事件循环机制

• Node.js 是单进程单线程应用程序，但是因为 V8 引擎提供的异步执行回调接口，通过这些接口可以处理大量的并发，所以性能非常高。

• Node.js 几乎每一个 API 都是支持回调函数的。

• Node.js 基本上所有的事件机制都是用设计模式中观察者模式实现。

• Node.js 单线程类似进入一个while(true)的事件循环，直到没有事件观察者退出，每个异步事件都生成一个事件观察者，如果有事件发生就调用该回调函数。

这就是javascript的事件循环机制，即EventLoop，这可是前端的一大面试考察点。

开启进程
开启线程
初始化数据，window/document/location...
whild(true){
    
    初始化事件列表
    根据事件修改数据
    根据数据去渲染页面
    
    
    if(count=0){
        运行js代码
        btn.onclick = function(){
            document.body.style.background = "skyblue"
            console.log(123)
        }
        console.log(456)
        count++
    }
    
    
}

那你说说，既然js是单线程的，它又是如何实现异步的呢？

js中的异步以及多线程都可以理解成为一种“假象”，就拿h5的WebWorker来说，子线程有诸多限制，不能控制DOM，不能修改全局对象等等，通常只用来做计算做数据处理。这些限制并没有违背js是单线程语言的思想，所以说是“假象”。

总的来说，JS异步的执行机制其实就是事件循环（eventloop）,理解了eventloop机制，就理解了js异步的执行机制。

在这里插入图片描述

好，你提到了JS的事件循环（eventloop），你能说一下它是怎么运作的？

1. 首先判断JS是同步还是异步，同步就进入主线程运行，异步就进入event table.
2. 异步任务在event table中注册事件，当满足触发条件后，（触发条件可能是延时也可能是ajax回调），被推入event queue
3. 同步任务进入主线程后一直执行，直到主线程空闲时，才会去event queue中查看是否有可执行的异步任务，如果有就推入主线程中。
4. 每次准备取出第一个宏任务执行前, 都要将所有的微任务一个一个取出来执行，也就是优先级比宏任务高，且与微任务所处的代码位置无关。

img

宏队列（macrotask，也叫tasks ）

• setTimeout
• setInterval
• setImmediate (Node独有)
• requestAnimationFrame (浏览器独有)
• I/O UI rendering (浏览器独有)。

微队列microtask，也叫jobs。

另一些异步任务的回调会依次进入micro task queue，等待后续被调用，这些异步任务包括 ：

• process.nextTick (Node独有)
• Promise
• Object.observe
• MutationObserve

上面简要介绍了一下js的事件循环机制，提到eventloop，就必须提一嘴js的事件驱动机制，js正是通过这些机制结合起来，实现了很风骚的异步编程风格。同时由于js单线程的原因，这也使得它能快速地处理IO，性能也还不错，进而也能成为一门后端语言。

---

事件驱动

Node.js 使用事件驱动模型，当web server接收到请求，就把它关闭然后进行处理，然后去服务下一个web请求。

当这个请求完成，它被放回处理队列，当到达队列开头，这个结果被返回给用户。这个模型非常高效可扩展性非常强，因为 webserver 一直接受请求而不等待任何读写操作。（这也称之为非阻塞式IO或者事件驱动IO）

在事件驱动模型中，会生成一个主循环来监听事件，当检测到事件时触发回调函数。这就是一个很典型的发布订阅者模型的使用。

Node.js 有多个内置的事件，可以通过引入 events 模块，并通过实例化 EventEmitter 类来绑定和监听事件，如下实例：

// 引入 events 模块
let events = require('events');
// 创建 eventEmitter 对象
let eventEmitter = new events.EventEmitter();

以下程序绑定事件处理程序：

// 绑定事件及事件的处理程序
eventEmitter.on('eventName', eventHandler);

可以通过程序触发事件：

// 触发事件
eventEmitter.emit('eventName');

实例

创建 main.js 文件，代码如下所示：

// 引入 events 模块
let events = require('events');
// 创建 eventEmitter 对象
let eventEmitter = new events.EventEmitter();
 
// 创建事件处理程序
let connectHandler = function connected() {
   console.log('连接成功。');
  
   // 触发 data_received 事件 
   eventEmitter.emit('data_received');
}
 
// 绑定 connection 事件处理程序
eventEmitter.on('connection', connectHandler);
 
// 使用匿名函数绑定 data_received 事件
eventEmitter.on('data_received', function(){
   console.log('数据接收成功。');
});
 
// 触发 connection 事件 
eventEmitter.emit('connection');
 
console.log("程序执行完毕。");

接下来让执行以上代码：

$ node main.js
连接成功。
数据接收成功。
程序执行完毕。

---

Node 应用程序是如何工作的？

在 Node 应用程序中，执行异步操作的函数将回调函数作为最后一个参数， 回调函数接收错误对象作为第一个参数。

接下来让来重新看下前面的实例，创建一个 input.txt ,文件内容如下：

官网地址：www.sxt.com

创建 main.js 文件，代码如下：

let fs = require("fs");

fs.readFile('input.txt', function (err, data) {
   if (err){
      console.log(err.stack);
      return;
   }
   console.log(data.toString());
});
console.log("程序执行完毕");

以上程序中 fs.readFile() 是异步函数用于读取文件。如果在读取文件过程中发生错误，错误 err 对象就会输出错误信息。

如果没发生错误，readFile 跳过 err 对象的输出，文件内容就通过回调函数输出。

执行以上代码，执行结果如下：

程序执行完毕
官网地址：www.sxt.com

接下来删除 input.txt 文件，执行结果如下所示：

程序执行完毕
Error: ENOENT, open 'input.txt'

因为文件 input.txt 不存在，所以输出了错误信息。

Node.js EventEmitter

Node.js 所有的异步 I/O 操作在完成时都会发送一个事件到事件队列。

Node.js 里面的许多对象都会分发事件：一个 net.Server 对象会在每次有新连接时触发一个事件， 一个 fs.readStream 对象会在文件被打开的时候触发一个事件。所有这些产生事件的对象都是 events.EventEmitter 的实例。

---

EventEmitter 类

events 模块只提供了一个对象：events.EventEmitter。EventEmitter 的核心就是事件触发与事件监听器功能的封装。

你可以通过require("events");来访问该模块。

// 引入 events 模块
let events = require('events');
// 创建 eventEmitter 对象
let eventEmitter = new events.EventEmitter();

EventEmitter 对象如果在实例化时发生错误，会触发 error 事件。当添加新的监听器时，newListener 事件会触发，当监听器被移除时，removeListener 事件被触发。

下面用一个简单的例子说明 EventEmitter 的用法：

//event.js 文件
let EventEmitter = require('events').EventEmitter; 
let event = new EventEmitter(); 
event.on('some_event', function() { 
    console.log('some_event 事件触发'); 
}); 
setTimeout(function() { 
    event.emit('some_event'); 
}, 1000); 

执行结果如下：

运行这段代码，1 秒后控制台输出了 'some_event 事件触发'。其原理是 event 对象注册了事件 some_event 的一个监听器，然后通过 setTimeout 在 1000 毫秒以后向 event 对象发送事件 some_event，此时会调用some_event 的监听器。

$ node event.js 
some_event 事件触发

EventEmitter 的每个事件由一个事件名和若干个参数组成，事件名是一个字符串，通常表达一定的语义。对于每个事件，EventEmitter 支持 若干个事件监听器。

当事件触发时，注册到这个事件的事件监听器被依次调用，事件参数作为回调函数参数传递。

以下面的例子解释这个过程：

//event.js 文件
let events = require('events'); 
let emitter = new events.EventEmitter(); 
emitter.on('someEvent', function(arg1, arg2) { 
    console.log('listener1', arg1, arg2); 
}); 
emitter.on('someEvent', function(arg1, arg2) { 
    console.log('listener2', arg1, arg2); 
}); 
emitter.emit('someEvent', 'arg1 参数', 'arg2 参数'); 

执行以上代码，运行的结果如下：

$ node event.js 
listener1 arg1 参数 arg2 参数
listener2 arg1 参数 arg2 参数

以上例子中，emitter 为事件 someEvent 注册了两个事件监听器，然后触发了 someEvent 事件。

运行结果中可以看到两个事件监听器回调函数被先后调用。这就是EventEmitter最简单的用法。

EventEmitter 提供了多个属性，如 on 和 emit。on 函数用于绑定事件函数，emit 属性用于触发一个事件。接下来来具体看下 EventEmitter 的属性介绍。

自己实现一个事件总线？

本质就是一个订阅发布模式的实现。

• 维护一个cache数组，即订阅者数组
• 实现on函数，即增加订阅者
• 实现off函数，即取消订阅
• 实现emit函数，即发布消息，通知订阅中心有更新

class EventBus {
    constructor() {
        this.cache = {};
    }
    on(name, fn) {
        if (this.cache[name]) {
            this.cache[name].push(fn);
        } else {
            this.cache[name] = [fn];
        }
    }
    off(name, fn) {
        const tasks = this.cache[name];
        if (tasks) {
            const index = tasks.findIndex((f) =>
                f === fn || f.callback === fn
            )
            if (index >= 0) {
                tasks.splice(index, 1);
            }
        }
    }

    emit(name) {
        if (this.cache[name]) {
            // 创建副本，如果回调函数内继续注册相同事件，会造成死循环
            const tasks = this.cache[name].slice()
            for (let fn of tasks) {
                fn();
            }
        }
    }

    emit(name, once = false) {
        if (this.cache[name]) {
            // 创建副本，如果回调函数内继续注册相同事件，会造成死循环
            const tasks = this.cache[name].slice()
            for (let fn of tasks) {
                fn();
            }

            if (once) {
                delete this.cache[name]
            }
        }
    }
}


const eventBus = new EventBus()
const task1 = () => { console.log('task1'); }
const task2 = () => { console.log('task2'); }
eventBus.on('task', task1)
eventBus.on('task', task2)

setTimeout(() => {
    eventBus.emit('task')
  }, 1000)