博客站

在JavaScript中，任务队列（Task Queue）是事件循环（Event Loop）机制的一部分，用于管理和调度异步任务的执行。理解任务队列对于掌握JavaScript的异步编程模型至关重要。

关键点

1. 调用栈（Call Stack）：

   • JavaScript引擎在执行代码时，会将同步任务依次放入调用栈中处理。
   • 一旦调用栈为空，事件循环就会开始检查任务队列中的任务。

2. 事件循环（Event Loop）：

   • 事件循环不断监视调用栈和任务队列。
   • 当调用栈为空时，事件循环会从任务队列中取出队列头部的任务，并将其推入调用栈中执行。

3. 任务队列（Task Queue）：

   • 任务队列存储的是待执行的任务（通常是由异步操作产生的回调函数）。
   • 常见的任务队列类型包括宏任务（Macro Task）队列和微任务（Micro Task）队列。

宏任务（Macro Task）

宏任务是由一些较大的异步操作产生的，比如：

• setTimeout
• setInterval
• I/O 操作（文件读写）
• UI 渲染

每个宏任务执行完毕后，事件循环会查看微任务队列，执行所有微任务，然后再执行下一个宏任务。

微任务（Micro Task）

微任务是一些需要尽快执行的任务，比如：

• Promise 的回调
• MutationObserver
• queueMicrotask

微任务队列会在当前宏任务执行完毕后立即执行，并且在执行下一个宏任务之前清空微任务队列。

执行顺序示例

console.log('start');

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

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

console.log('end');

执行顺序：

1. console.log('start'); —— 同步任务，立即执行。
2. setTimeout 的回调被放入宏任务队列。
3. Promise.resolve().then 的回调被放入微任务队列。
4. console.log('end'); —— 同步任务，立即执行。
5. 当前宏任务执行完毕，事件循环查看微任务队列，执行 Promise 的回调。
6. 输出 Promise。
7. 事件循环再执行下一个宏任务，即 setTimeout 的回调。
8. 输出 setTimeout。

因此，最终输出顺序为：

start
end
Promise
setTimeout

总结

任务队列是JavaScript事件循环机制的关键组成部分，用于管理异步任务的执行顺序。理解宏任务和微任务的区别及其执行顺序，对于编写高效、无阻塞的JavaScript代码至关重要。