浅谈js任务队列（microtask and macrotask）

最新推荐文章于 2025-03-20 10:59:16 发布

一只在学习的404

最新推荐文章于 2025-03-20 10:59:16 发布

阅读量1.4k

点赞数

分类专栏： js设计模式与开发实践 javascript

本文链接：https://blog.youkuaiyun.com/l908825925/article/details/83375083

版权

本文探讨了JavaScript中任务队列的概念，包括macrotask和microtask的区别。通过示例代码解释了它们的执行顺序：先执行macrotask，然后在每个macrotask结束后检查并执行所有microtask。当promise和setTimeout同时处于待执行状态时，promise的回调会优先执行。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先思考如下一段代码

// setTimeout
setTimeout(() => {
	console.log("setTimeout");
});
// promise
Promise.resolve().then(() => {
	console.log("promise");
});

你觉得会是以什么样的顺序输出？
那么反过来如下呢？

// promise
Promise.resolve().then(() => {
	console.log("promise");
});
// setTimeout
setTimeout(() => {
	console.log("setTimeout");
});

请自己打开控制台运行一遍结果看是否与自己的预期相同

浏览器中的每一段顺序执行的代码都是一个任务，他会被安放在macrotask的队列中，所以我们从打开浏览器开始执行js的时候，macrotask中就有了这么一个任务，然后执行的过程中遇到了I/O操作（鼠标键盘及其他设备）、网络操作、html parsing等等的异步操作，会把这些异步的任务的回调函数放在macrotask中，然后继续执行。

但是有部分的异步操作是不会放在macrotask中的，而是会放在microtask中的，比如上面例子中的promise中的异步操作。

所以浏览器存在着至少2个任务队列，一个是microtask，一个是macrotask。浏览器先执行