JavaScript执行（一）：Promise里的代码为什么比setTimeout先执行？-深入学习前端重构知识体系

当前位置:　首页>> 技术小册>> 深入学习前端重构知识体系

### JavaScript执行（一）：Promise里的代码为什么比setTimeout先执行？

在JavaScript的世界中，异步编程是不可或缺的一部分，它允许代码在等待某些耗时操作（如网络请求、文件读取等）完成时继续执行而不阻塞主线程。`Promise`和`setTimeout`是JavaScript中处理异步操作的两个重要机制，但它们在执行时机上却有着显著的不同，这常常让初学者感到困惑。本章将深入探讨为何在某些情况下，`Promise`里的代码会比`setTimeout`中设定的回调更早执行，并解析背后的JavaScript事件循环和任务队列机制。

#### 一、JavaScript的事件循环与任务队列

在理解`Promise`与`setTimeout`的执行顺序之前，我们首先需要了解JavaScript的运行机制——事件循环（Event Loop）和任务队列（Task Queues）。JavaScript是单线程的，但它通过事件循环机制支持异步操作。事件循环允许JavaScript执行代码块，处理事件，并在需要时暂停执行以等待异步操作完成。

- **调用栈（Call Stack）**：JavaScript引擎用它来管理函数的调用。每当一个函数被调用时，它就会被推入调用栈，并在执行完成后被移除。
- **堆（Heap）**：用于存储对象、数组等复杂数据结构的内存区域。
- **事件循环（Event Loop）**：持续检查调用栈是否为空，如果为空，则从任务队列中取出任务执行。
- **任务队列（Task Queues）**：存储等待被事件循环处理的回调函数队列。根据任务的类型，JavaScript中存在宏任务（macro-tasks）和微任务（micro-tasks）两种队列。

#### 二、宏任务与微任务

- **宏任务（Macro-Tasks）**：包括`setTimeout`、`setInterval`、`setImmediate`（Node.js特有）、I/O操作、UI渲染等。每个宏任务执行完毕后，会查看微任务队列，执行完所有微任务后，再回到事件循环中取下一个宏任务。
- **微任务（Micro-Tasks）**：包括`Promise.then`、`MutationObserver`（HTML5 DOM变动监听）、`process.nextTick`（Node.js特有）等。微任务队列中的任务总是在当前宏任务执行完毕后立即执行，且在当前宏任务之后的下一个宏任务之前完成。

#### 三、Promise与setTimeout的执行顺序

现在，我们有了足够的知识来理解为何`Promise`里的代码有时会比`setTimeout`中的回调更早执行。

假设我们有以下代码：

```javascript
console.log('开始');

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

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

console.log('结束');
```

执行顺序将是：

1. `'开始'` 被打印，因为它是同步代码，直接执行。
2. `setTimeout` 被调用，但回调函数被添加到宏任务队列中等待执行，即使延时设置为0，也不会立即执行。
3. `Promise.resolve().then(...)` 立即执行，并且其回调被添加到当前宏任务结束后的第一个微任务队列中。
4. `'结束'` 被打印，同样是同步代码。
5. 当前宏任务执行完毕后，事件循环检查并执行所有等待的微任务。因此，`'Promise.then执行'` 被打印。
6. 最后，当所有微任务都执行完毕后，事件循环回到宏任务队列，执行`setTimeout`的回调，打印`'setTimeout执行'`。

#### 四、深入解析

上述行为的关键在于理解JavaScript的事件循环机制如何区分并处理不同类型的任务。`Promise.then`属于微任务，它们会在当前宏任务结束后、下一个宏任务开始前被处理。而`setTimeout`，尽管其延时设置为0，依然会被推入宏任务队列，等待当前宏任务以及所有微任务完成后才执行。

这种设计使得JavaScript能够在不阻塞主线程的情况下，以更高效的方式处理异步操作。微任务队列的引入，特别是用于`Promise`，允许开发者编写出更加链式化和易于管理的异步代码。

#### 五、实践中的注意事项

- **避免滥用微任务**：虽然微任务可以确保某些操作尽快执行，但过度使用可能会导致“饥饿”现象，即微任务队列过长，阻塞了宏任务的执行，包括UI渲染等关键操作。
- **理解并区分异步机制**：了解`Promise`、`async/await`、`setTimeout`、`setInterval`等异步机制的不同，可以帮助开发者编写出更高效、更可预测的异步代码。
- **利用事件循环优化性能**：通过合理安排任务的执行时机，可以减少不必要的等待，提高应用程序的响应速度和性能。

#### 六、结论

`Promise`里的代码之所以在某些情况下比`setTimeout`中设定的回调先执行，是因为它们被JavaScript的事件循环机制分别放入了不同的任务队列中——微任务队列和宏任务队列。这种设计使得微任务（如`Promise.then`）能够在当前宏任务结束后立即执行，而宏任务（如`setTimeout`）则需要等待当前宏任务及所有微任务完成后才执行。理解这一机制对于编写高效、可预测的JavaScript异步代码至关重要。

该分类下的相关小册推荐：

零基础学JavaScript

编程入门课：Javascript从入门到实战

剑指javascript-ES6

KnockoutJS入门指南

npm script实战构建前端工作流

Javascript重点难点实例精讲（一）

Javascript-ES6与异步编程

JavaScript面试指南

经典设计模式Javascript版

Flutter核心技术与实战

Node.js 开发实战

Javascript编程指南