JS事件循环机制event loop宏任务微任务原理解析
首先看一段代码
async function (){
await f2()
console.log('f1')
}
async function f2(){
console.log('f2')
}
console.log('正常1')
f1()
setTimeout(()=>{
console.log('定时器')
})
console.log('正常2')
正确的打印顺序应该是：正常1，f2 ，正常2，f1，定时器
为什么会出现这样打印顺序呢
首先javascript是一门单线程语言，在最新的HTML5中提出了Web-Worker，但javascript是单线程这一核心仍未改变。既然js是单线程，那就像只有一个窗口的银行，客户需要排队一个一个办理业务，同理js任务也要一个一个顺序执行。如果一个任务耗时过长，那么后一个任务也必须等着。所以就出现了同步任务和异步任务。
概念
除了广义的同步任务和异步任务，对任务可以进行更精细的区分
- macro-task(宏任务)：包括整体代码script，setTimeout，setInterval
- micro-task(微任务)：Promise，process.nextTick
宏任务：浏览器为了能够使得JS内部task与DOM任务能够有序的执行，会在一个task执行结束后，在下一个 task 执行开始前，对页面进行重新渲染 （task->渲染->task->…）
鼠标点击会触发一个事件回调，需要执行一个宏任务，然后解析HTMl
微任务：微任务通常来说就是需要在当前 同步任务 执行结束后立即执行的任务，比如对一系列动作做出反馈，或者是需要异步的执行任务而又不需要分配一个新的任务，这样便可以减小一点性能的开销。
既然我们清楚了概念，我们再看一遍代码
async function (){
await f2()
console.log('f1')
}
async function f2(){
console.log('f2')
}
console.log('正常1')
f1()
setTimeout(()=>{
console.log('定时器')
})
console.log('正常2')
执行顺序
首先我们进行正常的同步流程，打印出‘正常1'，接下来执行f1()函数，await后面的函数f2()会立即执行，所以会打印'f2',继续执行同步代码打印‘正常2'，至此同步任务全部结束，开始执行异步任务微任务，await f2()等待f2()方法执行完之后打印出f1，最后执行宏任务setTimeout打印‘定时器'
这就是为什么‘正常1',正常2'会打印在‘f1'之前，因为所有微任务执行的时候，当前执行栈的代码必须已经执行完毕。‘f2','f1'会打印在‘定时器'之前是因为所有微任务总会在下一个宏任务之前全部执行完毕
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
最近发现在对JS的学习中有很多朋友对this的指向问题还是有很大的误区或者说只是大致了解,但是一旦遇到复杂的情况就会因为this指向问题而引发各种bug。所以这篇文章主要给大家介绍了关于js中this的指向问题的相关资料，需要的朋友可以参考下2018-11-11
在javascript中创建对象的三种方法，脚本之家以前发布过有简单实例版的，大家可以参考下。2010-12-12
这篇文章主要介绍了three.js 将图片马赛克化的方法，文中示例代码非常详细，帮助大家更好的理解和学习，感兴趣的朋友可以了解下2020-07-07
JavaScript 是一门强大的前端语言,在处理数值格式化时提供了多种方法,在开发过程中,我们经常需要将大数字格式化,使其更具可读性,例如,将 12000000.11 转换为 12,000,000.11,本文将详细介绍 JavaScript 中如何实现这种格式化,需要的朋友可以参考下2025-04-04
javascript两行代码即可实现按指定格式输出日期时间，非常不错，需要的朋友可以参考下2011-10-10
这篇文章主要为大家详细介绍了微信小程序实现动态验证码，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-05-05
有趣的思路~~JS仿 WINXP 注销桌面渐隐效果...2006-10-10
JavaScript实现获取某个元素相邻兄弟节点的prev与next方法
这篇文章主要介绍了JavaScript实现获取某个元素相邻兄弟节点的prev与next方法,涉及JavaScript基于函数的判定及调用previousSibling与nextSibling的相关技巧,需要的朋友可以参考下2016-01-01
这篇文章主要介绍了JS二叉树的简单实现方法,结合具体实例形式分析了基于javascript定义二叉树及二叉树节点的遍历、查找、添加、删除及运算相关操作技巧,需要的朋友可以参考下2017-04-04
这篇文章主要为大家详细介绍了JavaScript表单即时验证，验证不成功不能提交，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-08-08
最新评论