js中【微任务】和【宏任务】长篇解读

OEC小胖胖

已于 2024-09-30 08:42:30 修改

阅读量1.1k

点赞数 14

分类专栏： JavaScript 文章标签： javascript php 开发语言 web 前端 ecmascript

于 2024-09-10 18:31:22 首次发布

本文链接：https://blog.csdn.net/2301_79858914/article/details/142106021

版权

JavaScript 专栏收录该内容

94 篇文章 1 订阅

订阅专栏

在 JavaScript 中，理解微任务（microtasks)和宏任务 (macrotasks)是掌握异步编程和事件循环（Event Loop）机制的关键。这两个概念影响了代码的执行顺序，特别是在涉及异步操作（如 setTimeout、Promise、async/await 等）时。为了深刻理解它们的差异及其在事件循环中的表现，我们将从最基础的概念出发，逐步解释这些任务的执行机制。

1. JavaScript 的单线程与异步模型

首先，JavaScript 是一门单线程语言，意味着它在同一时刻只能执行一个任务。这一特性使得 JavaScript 在执行同步代码时很容易理解：代码按顺序一行一行地执行，直到所有代码执行完毕。然而，现代应用往往需要处理异步任务，例如网络请求、定时器回调、用户输入等。为了解决这一问题，JavaScript 引入了异步机制，通过事件循环（Event Loop)调度和管理异步任务。

2. 事件循环（Event Loop）的基本概念

JavaScript 的事件循环是处理异步操作的核心机制。事件循环的工作流程如下：

执行同步任务：JavaScript 引擎首先执行所有的同步任务，这些任务会立即进入调用栈（Call Stack）并被逐个执行。
处理异步任务：当遇到异步任务时（例如 setTimeout、Promise、I/O 操作等），这些任务不会立即执行，而是被放入相应的任务队列中（宏任务队列或微任务队列）。
检查微任务队列：当所有同步任务执行完毕，调用栈为空时，事件循环会优先检查并执行微任务队列中的所有任务。
执行宏任务：在微任务队列清空后，事件循环从宏任务队列中取出下一个宏任务并执行。每次执行完一个宏任务后，事件循环会再次检查微任务队列，依此反复进行。

3. 宏任务（Macrotasks）与微任务（Microtasks）

在 JavaScript 中，任务分为宏任务（macrotask）和微任务（microtask）。它们的区别主要体现在任务调度和执行顺序上。

宏任务（Macrotasks）

宏任务是事件循环的主任务，包括所有涉及异步操作的主要任务。宏任务由浏览器或 Node.js 环境调度，并在每轮事件循环中处理一个宏任务。常见的宏任务包括：

setTimeout 和 setInterval
I/O 操作（例如网络请求回调）
DOM 事件（如 click、keydown 等事件）
postMessage（在多个窗口或 iframe 之间通信）
MessageChannel
requestAnimationFrame

这些任务通常需要一定的等待时间（即使是 setTimeout(fn, 0)），并会在事件循环的某个阶段被处理。

微任务（Microtasks）

微任务的执行优先级比宏任务高。每当一个宏任务完成后，事件循环会立即执行微任务队列中的所有任务，只有在微任务队列清空后，才会继续执行下一个宏任务。常见的微任务包括：

Promise.then()、Promise.catch()、Promise.finally()
MutationObserver（观察 DOM 变化）
queueMicrotask()（用于将函数显式添加到微任务队列）

微任务的优势在于它们可以在当前事件循环周期内尽快执行，确保任务能够快速完成，尤其适合异步操作的回调处理。

4. 事件循环中的任务调度机制

同步任务执行流程

事件循环的第一步是执行所有的同步任务，即将同步代码依次压入调用栈（Call Stack），并按照顺序执行。当调用栈为空时，事件循环将开始处理异步任务。此时，事件循环会检查两个任务队列：

微任务队列（Microtask Queue）
宏任务队列（Macrotask Queue）

微任务优先原则

当同步任务执行完毕后，事件循环会首先检查微任务队列。如果微任务队列中有任务，事件循环会一次性执行所有的微任务（即清空微任务队列）。只有当微任务队列为空时，事件循环才会执行宏任务队列中的第一个任务。

宏任务执行流程

每次从宏任务队列中取出一个任务执行后，事件循环会再次检查微任务队列。如果微任务队列不为空，则会立即执行所有的微任务。在微任务队列为空后，才会回到宏任务队列继续处理下一个宏任务。

因此，微任务的执行优先级高于宏任务。即使一个宏任务已经准备好执行，微任务队列中的任务仍会先被执行。

5. 例子：理解微任务与宏任务的执行顺序

console.log('start'); // 同步任务

setTimeout(() => {
    console.log('setTimeout'); // 宏任务
}, 0);

Promise.resolve().then(() => {
    console.log('promise1'); // 微任务
}).then(() => {
    console.log('promise2'); // 微任务
});

console.log('end'); // 同步任务

执行顺序解析：

同步任务：首先执行 console.log('start')，输出 start。
同步任务：继续执行 console.log('end')，输出 end。
微任务队列：Promise.resolve() 的回调被放入微任务队列。事件循环执行完同步任务后，开始执行微任务队列中的任务，先输出 promise1，再输出 promise2。
宏任务队列：setTimeout() 的回调被放入宏任务队列。所有微任务完成后，事件循环执行宏任务，输出 setTimeout。

最终输出顺序为：

start
end
promise1
promise2
setTimeout

6. `queueMicrotask()` 与 `Promise.then()` 的区别

queueMicrotask() 和 Promise.then() 都会将任务加入微任务队列，但它们有一些细微的差别：

queueMicrotask()：这是一个直接将任务添加到微任务队列的函数，适用于需要在当前事件循环周期内尽快执行的任务。
Promise.then()：当 Promise 被 resolve 时，其 .then() 回调会被添加到微任务队列。

两者的执行时机基本一致，但 queueMicrotask() 提供了显式控制微任务的能力。

queueMicrotask(() => {
    console.log('microtask');
});

setTimeout(() => {
    console.log('timeout');
}, 0);

Promise.resolve().then(() => {
    console.log('promise');
});

输出顺序为：

microtask
promise
timeout

尽管 setTimeout 的延迟是 0，但微任务 microtask 和 promise 仍会优先于宏任务 timeout 执行。

7. 在 Node.js 环境中的区别

在浏览器环境中，微任务和宏任务的执行顺序如上所述。然而，在 Node.js 中，事件循环的机制略有不同。Node.js 的事件循环包括多个阶段，每个阶段处理特定类型的任务。

Node.js 中有一个特殊的微任务机制：process.nextTick()，它的优先级甚至高于微任务。process.nextTick() 的回调会在微任务之前执行，因此它可以用于需要更高优先级的任务。

process.nextTick(() => {
    console.log('nextTick');
});

Promise.resolve().then(() => {
    console.log('promise');
});

setTimeout(() => {
    console.log('timeout');
}, 0);