js Event Loop 事件循环

JavaScript017

js Event Loop 事件循环,第1张

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 是单进程单线程应用程序,但是因为 V8 引擎提供的异步执行回调接口,通过这些接口可以处理大量的并发,所以性能非常高。

Node.js 使用事件驱动模型,当web server接收到请求,就把它关闭然后进行处理,然后去服务下一个web请求。当这个请求完成,它被放回处理队列,当到达队列开头,这个结果被返回给用户。这个模型非常高效可扩展性非常强,因为 webserver 一直接受请求而不等待任何读写操作。(这也称之为非阻塞式IO或者事件驱动IO)在事件驱动模型中,会生成一个主循环来监听事件,当检测到事件时触发回调函数。

events事件模块:

只有一个模块,EventEmitter核心就是事件触发emite,和事件监听on

应用

(1)const event=require("events")模块

(2)new一个新的对象new evnet.EventEmitter()

(3)on("eventName",function(error,data){})创建监听器,一个事件可以创建多个监听

(4)emit("eventName")触发事件

(5)addListener("eventName",function(error,data){})也可以监听事件

(6)listenerCount("eventName")获取监听器个数,

getMaxListeners()//获取监听器数量;

setMaxListeners(n)//设置监听器数量;

eventNames() 获取当前触发器实例注册的所有事件名

listeners(事件名称)获取指定事件下的所有监听器

rawListeners(事件名称) 获取指定事件下的所有监听器

(7)移除监听事件的监听器;removeListener("eventName",fun),removeAllListener()off(事件名称,监听器名称)

(8)once():只触发一次,被移除;

(9)prependListener(事件名称,监听器):优先触发,事件监听器;

(10)prependOnceListener(事件名称,监听器) 触发一次 触发后移除

(11)EventEmitter.defaultMaxListeners = 8 每一个触发器实例 同一个事件最多绑定10个监听器 超出报警告

触发器实例上的内部事件

(1)订阅就会触发 newListener

myEmitter.on('newListener',(eventName,listener)=>{

console.log( 新增事件${eventName} ,listener)

})

(2)移除监听器会触发 removeListener

myEmitter.on('removeListener',(eventName,listener)=>{

console.log( 移除事件${eventName} ,listener)

})

事件触发,放在调用堆栈中;定时器结束时,函数会被放入“消息队列”中

事件循环会赋予调用堆栈优先级,它首先处理在调用堆栈中找到的所有东西,一旦其中没有任何东西,便开始处理消息队列中的东西。

setTimeout、fetch、或其他的函数是使用的是消息队列:回调函数放在调用堆栈的末尾;

promise,async/await函数使用的是作业队列:前函数结束之前 resolve 的 Promise 会在当前函数之后被立即执行。

process.nextTick(fun):事件循环进行一次完整行程时我们成为一个滴答,传入的函数则指示引擎在当前操作结束(在下一个事件循环滴答开始之前)时调用此函数:

回掉函数的第一个参数是err,如果正确返回null

第一步,在全局环境中安装node inspector。第二步,安装完成之后,以调试模式运行需要调试的node代码。第三步,启动node inspector。第四步,就可以看到,一个模拟Chrome调试窗口的页面,加载了node中的所有代码。

nodejs是单线程运行的,通过一个事件循环来循环取出消息队列(event queue)中的消息进行处理,处理过程基本上就是去调用该消息对应的回调函数。