js 事件循环消息队列和微任务宏任务
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了js 事件循环消息队列和微任务宏任务，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含4731字，纯文字阅读大概需要7分钟。
内容图文
文章目录
一、事件循环与消息队列
因为js是单线程脚本语言，一般情况下代码是同步执行。也就是说js执行代码是一行一行向下执行的，前面没有执行完成是不会执行后面的代码的。
同步和异步的区别其实就在于需不需要排队的问题
同步：所有任务一视同仁，都得排队，先来后到；
异步：可以按照一定规则（不至于乱套）插队执行；
事件循环和消息队列怎么理解
事件循环：单线程脚本语言javascript处理任务的一种执行机制，通过循环来执行任务队列里的任务。这个执行过程形象的称之为事件循环
消息队列：js为单线程脚本语言，执行任务时需要排队，每当有新的任务来临时就加到这个队列后面。这个队列就叫消息队列或者任务队列
二、浏览器与Node的事件循环有何区别?
1.浏览器事件循环过程
当某个宏任务执行完后,会查看是否有微任务队列。
如果有，先执行微任务队列中的所有任务，
如果没有，会读取宏任务队列中排在最前的任务，执行宏任务的过程中，遇到微任务，依次加入微任务队列。
栈空后，再次读取微任务队列里的任务，依次类推。
2.node事件循环过程
1.外部输入数据
2.轮询阶段(poll)
3.检查阶段(check)
3.关闭事件回调阶段(close callback)
4.定时器检测阶段(timer)
5.I/O事件回调阶段(I/O callbacks)
6.闲置阶段(idle, prepare)
7.轮询阶段（按照该顺序反复运行）...
timers 阶段：这个阶段执行timer（setTimeout、setInterval）的回调
I/O callbacks 阶段：处理一些上一轮循环中的少数未执行的 I/O 回调
idle, prepare 阶段：仅node内部使用
poll 阶段：获取新的I/O事件, 适当的条件下node将阻塞在这里
check 阶段：执行 setImmediate() 的回调
close callbacks 阶段：执行 socket 的 close 事件回调
注意：
上面六个阶段都不包括 process.nextTick(),这个函数其实是独立于事件循环之外的，它有一个自己的队列，当每个阶段完成后，
如果存在 nextTick 队列，就会清空队列中的所有回调函数，并且优先于其他微任务执行
三、微任务和宏任务
在js中，任务可以分为同步任务和异步任务，也可以分为微任务和宏任务。同步任务属于宏任务，有了这些划分，就可以保证所有任务都有条不紊的执行下去，总的来说就是给要执行的任务定了执行规则、划分了优先级。
在总结宏任务与微任务时，我们先要知道我们哪些情况下可能会执行异步操作（未来某个时间执行任务）；然后要知道宏任务与微任务是怎么区分的，哪些属于宏任务，哪些属于微任务；最后我们要知道宏任务与微任务是通过什么规则来配合执行的。
1.可能存在异步执行的情况
回调函数 callback
Promise/async await
Generator 函数
事件监听
发布/订阅
计时器
requestAnimationFrame
MutationObserver
process.nextTick
I/O
2.宏任务
所有的同步任务
I/O, 比如文件读写、数据库数据读写等等
window.setTimeout
window.setInterval
window.setImmediate
window.requestAnimationFrame
3.微任务
Promise.then catch finally
Generator 函数
async await 和promise是一样的，属于微任务
MutationObserver
四、任务执行过程
所有任务都在主进程上执行，异步任务会经历2个阶段 Event Table和Event Queue
同步任务在主进程排队执行，异步任务（包括宏任务和微任务）在事件队列排队等待进入主进程执行
遇到宏任务推进宏任务队列，遇到微任务推进微任务队列（宏任务队列的项一般对应一个微任务队列，有点像一个大哥带着一群小马仔，这就组成一组异步任务。如果有嵌套那就会有多个大哥小马仔）
执行宏任务，执行完宏任务，检查有没有当前层的微任务（大哥带着小马仔逐步亮相。。。）
继续执行下一个宏任务，然后执行对应层次的微任务，直到全部执行完毕（下一个大哥带着他的小马仔亮相。。。）
五、举例
//因为涉及到process 所以应该在node环境下执行
console.log('1') //主进程 执行
setTimeout(function() {
console.log('2') //因为setTimeout是宏任务，所以加入宏任务队列1，['2']
process.nextTick(function() {
console.log('3') //因为 process.nextTick是微任务，所以加入微任务队列2，['4','3']
})
new Promise(function(resolve) {
console.log('4') //因为此处代码执行不属于异步，所以直接推入主程序执行，['4']
resolve()
}).then(function() {
console.log('5') // 因为promise then 是微任务，所以推入微任务队列2,['4','3','5']
})
},0)
// process.nextTick总是发生在所有异步任务之前
process.nextTick(function() {
console.log('6') //因为process.nextTick是微任务，所以推入微任务队列1,['6']
new Promise(function(resolve) {
console.log('7')//因为此处代码执行不属于异步，所以直接推入主程序执行，['6','7']
resolve()
}).then(function() {
console.log('8')//因为 promise then 是微任务，所以推入微任务队列1,['6','7','8']
})
setTimeout(function() {
console.log('9')//因为setTimeout是宏任务，所以推入宏任务队列2 ，['9']
process.nextTick(function() {
console.log('10')//因为process.nextTick是微任务，所以推入微任务队列3，['9','11','12','10']
})
new Promise(function(resolve) {
console.log('11')//因为此处代码执行不属于异步，所以直接推入主程序执行,['9','11']
resolve()
console.log('12')因为此处代码执行不属于异步，所以直接推入主程序执行,['9','11','12']
}).then(function() {
console.log('13')//因为 promise then 是微任务，所以推入微任务队列3,['9','11','12','10','12']
})
},0)
})
//打印输出
// 1
// 6
// 7
// 8
// 2
// 4
// 3
// 5
// 9
// 11
// 12
// 10
// 13
内容总结
以上是互联网集市为您收集整理的js 事件循环消息队列和微任务宏任务全部内容，希望文章能够帮你解决js 事件循环消息队列和微任务宏任务所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。