当前位置: 首页 > news >正文

直播平台搭建,浏览器中的事件循环与Node中的事件循环 - 云豹科技

直播平台搭建,浏览器中的事件循环与Node中的事件循环

浏览器中的事件循环

1、JS线程读取并执行JS代码
2、执行JS代码的过程中,指定异步的操作给对应的线程处理
3、异步线程处理完毕之后,讲对应的回调函数推入任务队列
4、JS线程执行完毕之后,查询任务队列,取一个任务推入JS线程运行
5、重复2-4

image

 

image

 

macrotask queue宏任务队列(有多个):Ajax请求、绑定事件的回调函数、定时器的回调函数…
microtask queue微任务队列(只有一个):promises、Object.observe、MutationObserver…

console.log('脚本开始');setTimeout(() => {console.log('进入setTimeout1回调函数');
}, 0);setTimeout(() => {console.log('进入setTimeout2回调函数');Promise.resolve().then(() => {console.log('进入promise2回调函数');Promise.resolve().then(() => {console.log('进入promise3回调函数');});console.log('promise2回调函数结束');});setTimeout(() => console.log('进入setTimeout3回调函数'), 0);
}, 0);Promise.resolve().then(() => {console.log('进入promise1回调函数');
});console.log('脚本结束');

执行结果

脚本开始
脚本结束
进入promise1回调函数
进入setTimeout1回调函数
进入setTimeout2回调函数
进入promise2回调函数
promise2回调函数结束
进入promise3回调函数
进入setTimeout3回调函数

执行流程:
一、查询宏任务队列,取一个执行,把脚本执行当作一个宏任务来看待
二、查询微任务队列,全部执行完毕,包括当前微任务队列执行时产生的新的微任务

Node中的事件循环

Node的组成

image

 

执行步骤
定时器阶段:setTimeout/setInterval
等待回调阶段:执行某些系统操作的回调,TCP错误处理
闲置阶段、准备阶段:只在内部使用
轮询阶段:I/O 回调
检查阶段:setImmediate
关闭回调阶段:关闭类的回调,socket.on(‘close’,…)

示例图

image

 

注意事项:process.nextTick > promise
每个阶段都有自己的先进先出队列,当事件循环进入到该阶段,就会执行指定的队列,直到队列被耗尽,或者达到回调的最大数量
在进入到每一个阶段之前,都会执行NextTick队列和微任务队列,前者优先级更高

// process.nextTick、promise、setImmediate、setTimeout优先级比较// 事件循环的各阶段执行队列任务之前,会先复制当前时间的该阶段的队列
// 事件循环的各阶段执行队列任务,直到队列耗尽或者达到上限
// 进入各阶段之前,会执行微任务队列(nextTick队列和promise队列)
Promise.resolve().then(() => console.log('promise1'));
Promise.resolve().then(() => {console.log('promise2');Promise.resolve().then(() => console.log('promise in promise'));
});
Promise.resolve().then(() => {console.log('promise3');process.nextTick(() => console.log('next tick in promise'));
});
Promise.resolve().then(() => console.log('promise4'));
Promise.resolve().then(() => console.log('promise5'));// 宏任务里边的宏任务总是会放到下一轮询,微任务立即执行?
setImmediate(() => console.log('immediate1'));
setImmediate(() => {console.log('immediate2');process.nextTick(() => console.log('next tick in immediate'));Promise.resolve().then(() => {console.log('promise in immediate');process.nextTick(() => console.log('next tick in promise in immediate'));});setImmediate(() => console.log('inner immediate'));
});// 如果上面的Promis里面加个Promise试一下
process.nextTick(() => console.log('next tick1'));
process.nextTick(() => {console.log('next tick2');process.nextTick(() => console.log('inner next tick'));
});
process.nextTick(() => console.log('next tick3'));setTimeout(() => {console.log('timeout');// 是在执行第一个定时器回调的时候添加到队列的,不是一开始就在队列setTimeout(() => console.log('inner timeout'), 0);
}, 0);setImmediate(() => console.log('immediate3'));
setImmediate(() => console.log('immediate4'));

执行结果

next tick1
next tick2
next tick3
inner next tick
promise1
promise2
promise3
promise4
promise5
promise in promise
next tick in promise
timeout
immediate1
immediate2
immediate3
immediate4
next tick in immediate
promise in immediate
next tick in promise in immediate
inner timeout
inner immediate

以上就是直播平台搭建,浏览器中的事件循环与Node中的事件循环, 更多内容欢迎关注之后的文章

http://www.wxhsa.cn/company.asp?id=2723

相关文章:

  • Redisson 分布式锁的实现原理 - 教程
  • 关于前端的一些疑问整理(标签属性值和符号)
  • 深入解析:免费的SSL和付费SSL 证书差异
  • 领嵌iLeadE-588网关AI边缘计算盒子智能安防监控
  • 十五、异常和中断事件的初始检测、识别和处理
  • 十四、异常和中断的分类
  • 思考 | 躺平者的本质和区别
  • ros2--service/服务--接口 - 教程
  • c++
  • LayerMask的使用规范
  • 存在,是终极的神奇。ECT-OS-JiuHuaShan 框架正是这份神奇的自我觉醒、自我阐述与自我捍卫
  • 深入解析:【Unity基础】枚举AudioType各个枚举项对应的音频文件类型
  • 十三、异常和中断的基本概念
  • 【关注可白嫖源码】25046基于SpringBoot的少儿编程管理系统设计与达成
  • 2024-2025第二学期计算机网络助教工作总结
  • 信息搜集、物联网搜索引擎、ARL灯塔系统、Nmap
  • 工具链部署实用技巧 7|模型设计帧率推理时耗时与带宽分析
  • 基于Django的“社区爱心养老管理系统”设计与开发(源码+数据库+文档+PPT) - 实践
  • 关于导出bangumi.tv用户收藏/观看数据
  • ECT-OS-JiuHuaShan框架元推理,为何超乎想象,难以置信?
  • 实用指南:Excel转图片excel2img库bug修复:AttributeError ‘parent‘ 问题解决方案
  • ECT-OS-JiuHuaShan框架元推理,其运行与推理,是自指自洽性的唯一证明
  • 数据结构与算法-32.图-加权无向图最小生成树
  • 找到字符串中所有字母异位词-leetcode
  • 配置gemini
  • 基于chrony的NTP校时配置方法
  • windows能过注册表修改c盘默认目录
  • ECT-OS-JiuHuaShan框架元推理,就是普罗米修斯主义,穷神知化
  • UI/UX 桌面操作系统应该做好的几个功能
  • 完整教程:1.1 汽车运行滚动阻力