精学JS：宏任务 & 微任务的运行机制

最新推荐文章于 2024-08-07 17:27:15 发布

万邺

最新推荐文章于 2024-08-07 17:27:15 发布

阅读量1.6k

点赞数

分类专栏：精学JS 文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/qq_42198495/article/details/125211316

版权

本文深入探讨JavaScript的宏任务与微任务的运行机制，通过实例分析宏任务（如setTimeout、事件循环）和微任务（如Promise、MutationObserver）的执行顺序。在浏览器环境中，执行顺序大致为：先执行宏任务，再执行当前宏任务结束后产生的微任务，如此循环。了解这一机制对于理解和优化JavaScript异步代码至关重要。

摘要由CSDN通过智能技术生成

首先分析宏任务和微任务的运行机制，并针对日常开发中遇到的各种宏任务&微任务的方法，结合一些例子来看看代码运行的顺序逻辑，把这部分知识点重新归纳和梳理。

在日常开发中，例如 setTimeout和 promise都是经常会使用到的 JS方法。当这些方法变多了之后，再结合 JS的异步编程代码混合使用，最终的执行顺序也经常会让开发者迷惑，因此要把这些问题搞清楚，这部分还是有必要好好学习一下。

在开始前请先思考一下：

宏任务和微任务分别有哪些方法？
宏任务和微任务互相嵌套，执行顺序是什么样的？

代码执行顺序（一）

开始讲解正式内容之前，我们先看一段代码，算是开胃的前菜，如果之前对这部分知识稍有了解，一般都应该可以回答正确。

console.log("begin");
setTimeout(() => {
    console.log('setTimeout');
}, 0);
new Promise((resolve)=>{
    console.log('promise');
    resolve();
}).then(()=>{   
    console.log("then1");
}).then(()=>{
    console.log("then2");
})
console.log('end');
/* 
执行结果：  
begin
promise
end
then1
then2
setTimeout
*/

其实这个