js的宏任务和微任务之道

最新推荐文章于 2024-05-13 04:30:53 发布

全栈小白哥

最新推荐文章于 2024-05-13 04:30:53 发布

阅读量167

点赞数

分类专栏： JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/qq_41412599/article/details/104625365

版权

2 篇文章 0 订阅

订阅专栏

页面中的大部分任务都是在主线程上执行的，这些任务主要：

为了协调这些任务有条不紊地在主线程上执行，页面进程引入了消息队列和事件循环机制，渲染进程内部会维护多个消息队列，比如延迟队列和普通的消息队列。然后主线程采用一个for循环，不断的从任务队列中取出任务并执行任务。这些消息队列中的任务称为宏任务。保存待执行的宏任务的队列称为宏队列。

消息队列中的任务是通过事件循环机制来执行的，而在WHATWG规范定义消息队列宏任务的大致流程：

每个宏任务都关联着一个微任务队列，微任务队列既是存放微任务的队列。当Javascript执行一段脚本时，V8引擎会为其创建一个全局执行上下文，在创建全局上下文的同时，V8引擎也会在内部同时创建一个微任务队列。

微任务就是一个需要异步执行的函数，执行的时机是在主函数执行结束之后，当前宏任务执行结束之前。

微任务产生的方式：

使用MutationObserver监控某个DOM节点，然后再通过JavaScript来修改这个节点，或者为这个节点添加，删除部分子节点，当DOM节点发生变化时，就会产生DOM变化记录的微任务。
使用Promise，当调用Promise.resolve()或者Promise.reject()的时候，也会产生微任务。

通过DOM节点变化产生的微任务和Promise产生的微任务都会被保存到微任务队列中。

微任务执行的时间：
通常情况下，在当前宏任务中的JavaScript快执行完成时，也就是JavaScript引擎准备退出全局上下文并清空调用栈时，JavaScript引擎会检查全局执行上下文中的微任务队列。然后按照顺序执行队列中的微任务。WHATWG把执行微任务的时间点成为检查点

如果在执行微任务队列中的任务，产生了新的微任务，同样会将该微任务添加队列中，V8引擎一直循环执行任务中的任务，直到队列为空才算执行结束。也就是说在执行微任务过程中产生的新的微任务并不会推迟到下个宏任务中才执行，而是在当前的宏任务中继续执行。

微任务和宏任务是绑定的，每个宏任务在执行时，会创建自己的微任务队列
微任务的执行时长会影响到当前宏任务的时长。比如一个宏任务在执行过程中，产生了100个微任务，执行每个宏任务的时间是10ms，那么宏任务因微任务的执行让其执行时间延长了1s
在一个宏任务中，分别创建一个用于回调的宏任务和微任务，无论什么情况下，微任务都早于宏任务的执行

关注

专栏目录