事件循环(EventLoop)的学习总结
2023-09-11 14:16:54 时间
前言
在学习eventloop之前,我们需要复习一下js的单线程和异步。
虽说js是单线程的,但是在浏览器和Node中都做了相应的处理。如浏览器中的web workers(工作线程),Node中的child_process(子进程)。它们的出现对大量计算的分解起到了促进作用。
事件循环
当进程启动时,Node会创建一个tick循环,每个tick循环通过内部的观察者来查看是否有事件需要处理,如果有就取出事件和它相关的回调函数去执行,执行完以后就进入下一个循环,如果不再有就退出进程。
浏览器中的eventloop
在浏览器中把异步事件放到工作线程中,避免阻塞主线程UI的渲染
console.log('进程开始')
const ajax = new XMLHttpRequest()
ajax.addEventListener('load', () => {
console.log('load')
})
ajax.addEventListener('loadend', () => {
if (ajax.readyState == 4 && ajax.status == 200) {
console.log('ajax success')
} else {
console.log('ajax success')
}
})
ajax.open('get', 'http://localhost/study/html/vue.js')
ajax.send()
setTimeout(() => {
console.log('setTimeout')
}, 300)
fetch('http://localhost/study/html/demo.json',{
headers: {
'content-type': 'application/json'
}
}).then(res => {
console.log('fetch')
})
let i = 0
while(i < 10000) {
i++
}
console.log(i)
console.log('进程结束')
从结果可以看出三种异步处理不阻塞主线程代码的执行,而ajax、fetch、setTimeout根据代码处理结束的先后来执行回调函数。
Nodejs中的eventloop
Node中的事件循环根据观察者的优先级来执行,同一个循环内的process.nextTick -> setTimeout -> setImmediate
setTimeout(() => {
console.log('setTimeout')
}, 0)
setImmediate(() => {
console.log('setImmediate1')
process.nextTick(() => {
console.log('setImmediate1 插入nextTick')
})
})
setImmediate(() => {
console.log('setImmediate2')
})
process.nextTick(() => {
setTimeout(() => {
console.log('nextTick1 setTimeout')
}, 100)
console.log('nextTick1')
})
process.nextTick(() => {
console.log('nextTick2')
})
console.log('正常执行')
总结
事件循环的执行特点,源于利用单线程,远离多线程死锁、状态同步等问题;利用异步让单线程远离阻塞,以更好的使用CPU。
相关文章
- 【nodejs原理&源码赏析(7)】【译】Node.js中的事件循环,定时器和process.nextTick
- selenium-webdriver(python) (十五) -- 鼠标事件
- jQuery 自定义事件的学习笔记
- python事件调度库sched
- node.js中的事件循环机制
- 触摸事件【MotionEvent】简介
- python处理多线程之间事件通讯方法
- node.js中的事件循环机制
- Google 和 Facebook 如何大规模处理 IT 事件管理 —— 2016 SRE 大会之我见
- 通过IL分析C#中的委托、事件、Func、Action、Predicate之间的区别与联系
- Atitit mvc之道 attilax著 以vue为例 1. Atitti vue的几大概念1 1.1. 声明式渲染1 1.2. 条件与循环2 1.3. 处理用户输入 click事件2 1
- Atitit 数据库的事件机制--触发器与定时任务attilax总结
- iOS RunLoop 数据结构 事件循环的实现机制
- 【Qt源码笔记】Qt事件与Windows消息循环的联系
- nodejs中事件循环中的执行顺序
- 【DOM】DOM事件全解析,万字总结,看这一篇文章就够了_07