题目描述:
浏览器和Node 事件循环的区别
解题:
- 思路一:
- 其中一个主要的区别在于浏览器的event loop 和nodejs的event loop 在处理异步事件的顺序是不同的,nodejs中有micro event;其中Promise属于micro event 该异步事件的处理顺序就和浏览器不同.nodejs V11.0以上 这两者之间的顺序就相同了
function test () {
console.log('start')
setTimeout(() => {
console.log('children2')
Promise.resolve().then(() => {console.log('children2-1')})
}, 0)
setTimeout(() => {
console.log('children3')
Promise.resolve().then(() => {console.log('children3-1')})
}, 0)
Promise.resolve().then(() => {console.log('children1')})
console.log('end')
}
test()
// 以上代码在node11以下版本的执行结果(先执行所有的宏任务,再执行微任务)
// start
// end
// children1
// children2
// children3
// children2-1
// children3-1
// 以上代码在node11及浏览器的执行结果(顺序执行宏任务和微任务)
// start
// end
// children1
// children2
// children2-1
// children3
// children3-1
- 思路二:
浏览器
关于微任务和宏任务在浏览器的执行顺序是这样的:
- 执行一只task(宏任务)
- 执行完micro-task队列 (微任务)
- 如此循环往复下去
浏览器的task(宏任务)执行顺序在 html#event-loops 里面有讲就不翻译了
常见的 task(宏任务) 比如:setTimeout、setInterval、script(整体代码)、 I/O 操作、UI 渲染等。
常见的 micro-task 比如: new Promise().then(回调)、MutationObserver(html5新特性) 等。
Node
Node的事件循环是libuv实现的,引用一张官网的图:
大体的task(宏任务)执行顺序是这样的:- timers定时器:本阶段执行已经安排的 setTimeout() 和 setInterval() 的回调函数。
- pending callbacks待定回调:执行延迟到下一个循环迭代的 I/O 回调。
- idle, prepare:仅系统内部使用。
- poll 轮询:检索新的 I/O 事件;执行与 I/O 相关的回调(几乎所有情况下,除了关闭的回调函数,它们由计时器和 setImmediate() 排定的之外),其余情况 node 将在此处阻塞。
- check 检测:setImmediate() 回调函数在这里执行。
- close callbacks 关闭的回调函数:一些准备关闭的回调函数,如:socket.on('close', ...)。
微任务和宏任务在Node的执行顺序
Node 10以前:
- 执行完一个阶段的所有任务
- 执行完nextTick队列里面的内容
- 然后执行完微任务队列的内容
Node 11以后: - 和浏览器的行为统一了,都是每执行一个宏任务就执行完微任务队列。
- 思路三?:
:point_down:~~~~ 欢迎在下方**评论补充**你的答案,一起来学习~:pushpin:
扩展阅读:
- 最全的事件循环(Event Loop)机制以及实例讲解- 掘金
- 关于重绘和回流,你真的了解了?
- 从浏览器多进程到 JS 单线程,JS 运行机制最全面的一次梳理
- 深入浅出Node.js 中的进程与线程(深度理解)
❤️ 看完两件小事
如果你觉得这篇文章对你挺有启发,我想请你帮我两个小忙:
把这篇文章分享给你的朋友 / 交流群,让更多的人看到,一起进步,一起成长!
关注公众号 「IT平头哥联盟」,公众号后台回复「资源
」 免费领取我精心整理的前端进阶资源教程
JS中文网 - 前端进阶资源教程 www.javascriptC.com
一个致力于帮助开发者用代码改变世界为使命的平台,每天都可以在这里找到技术世界的头条内容
![JS中文网 - 前端进阶资源教程,领略前端前沿,关注IT平头哥联盟](https://www.javascriptc.com)
来源:CSDN
作者:Mark_yangyx
链接:https://blog.csdn.net/Mark_yangyx/article/details/104036648