js宏任务、微任务、事件循环机制

一、常见的宏任务和微任务

  • 异步任务:宏任务和微任务,都属于异步任务
    • 常见宏任务:setTimeout setInterval script
    • 常见微任务:Promise.then() process.nextTick

二、js执行顺序

1. 结论

  • js是单线程执行,代码执行顺序是从上到下。先执行主线程中的同步任务,再执行微任务,最后执行宏任务

2. 具体执行过程

  1. 初始状态下,调用栈是空的,微任务队列也是空的,宏任务队列里有且只有一个 script 脚本(也就是整体代码)。所以首先执行并出队的就是宏任务队列中的整体代码。

  2. 整体代码作为宏任务进入调用栈之后,同步任务会直接执行,并且执行完以后出栈,异步任务会进行微任务和宏任务的划分,分别放入微任务队列和宏任务队列。

  3. 等到同步任务执行完了以后(也就是调用栈为空以后),就会去处理微任务队列,将微任务队列拉到调用栈里面。

  4. 微任务队列处理完了(调用栈为空)之后,再去处理宏任务队列,将宏任务队列拉到调用栈里面。

3. 注意

  • 问题:微任务和宏任务的执行顺序,大多数人认为是先执行微任务,再执行宏任务。但是也有人认为是先执行宏任务,再执行微任务。
  • 原因:代码执行前,script 脚本(整体代码)是放在宏任务队列中的,所以也可认为是先执行的宏任务。但实际上,从上面的具体执行过程中2、3、4步骤看来,是先执行微任务,再执行宏任务。

三、js 事件循环机制

js 是单线程执行的,前一个任务执行完,才能执行下一个任务,为了提高用户体验,将任务分为了同步任务和异步任务,同步任务会在主线程上排队执行,异步任务会被放进“任务队列”,同步任务执行完以后,主线程会从任务队列中读取“异步任务”,上一个异步任务执行完之后,再去读取下一个异步任务,主线程从"任务队列"中一个一个的读取“异步任务”的这个过程是循环不断的,这个就是 js 的事件循环机制。

  • 2
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JavaScript 是一门单线程语言,也就是说在同一时间内只能执行一个任务。但是它又需要处理各种不同的任务,如 UI 事件、网络请求等。为了解决这个问题,JavaScript 引入了事件循环机制事件循环机制基于一个事件循环线程,该线程会不断地从任务队列中取出任务并执行。任务可以分为两种类型:宏任务微任务宏任务是指由浏览器或 Node.js 提供的 API,如 setTimeout、setInterval、I/O 操作等。当宏任务执行完毕后,事件循环线程会从宏任务队列中取出一个新的宏任务继续执行,直到宏任务队列为空。 微任务是指由 Promise、MutationObserver 等提供的异步任务。当一个微任务被加入队列中时,事件循环线程会在当前宏任务执行完毕后,立即执行所有微任务。如果在执行微任务的过程中,又产生了新的微任务,那么这些新的微任务会被添加到微任务队列的末尾,等待下一轮执行。 在事件循环机制中,每个宏任务只会对应一个微任务队列。当一个宏任务执行完毕后,会依次执行该宏任务对应的微任务队列中的所有微任务,直到微任务队列为空。然后再取出下一个宏任务并执行。 总结一下,事件循环机制的执行顺序为:执行一个宏任务,接着执行该宏任务微任务队列中的所有微任务,然后再执行下一个宏任务。这个过程会不断地重复,直到所有任务都被执行完毕。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值