JS异步的执行顺序是什么

JavaScript 是一种单线程语言，这意味着它一次只能执行一个任务。然而，JavaScript 通过异步编程模型来处理并发操作，使得它能够在不阻塞主线程的情况下执行耗时操作（如网络请求、文件读写等）。理解 JavaScript 异步执行的顺序对于编写高效、响应迅速的代码至关重要。

1. 同步与异步

1.1 同步执行

同步代码按照顺序执行，每一行代码必须等待前一行代码执行完毕后才能执行。例如：

console.log('1');
console.log('2');
console.log('3');

输出结果为：

1
2
3

1.2 异步执行

异步代码不会阻塞后续代码的执行。常见的异步操作包括 setTimeout、Promise、async/await 等。例如：

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

输出结果为：

1
3
2

尽管 setTimeout 的延迟时间为 0 毫秒，但它仍然会被放入事件队列中，等待同步代码执行完毕后再执行。

2. 事件循环（Event Loop）

JavaScript 的异步执行依赖于事件循环机制。事件循环是 JavaScript 运行时环境的一部分，它负责处理异步任务的调度和执行。

2.1 调用栈（Call Stack）

调用栈是一个后进先出（LIFO）的数据结构，用于存储当前执行的函数调用。当函数被调用时，它会被推入调用栈；当函数执行完毕时，它会被弹出调用栈。

2.2 任务队列（Task Queue）

任务队列是一个先进先出（FIFO）的数据结构，用于存储待执行的异步任务。当异步任务完成时，它会被放入任务队列中，等待事件循环将其推入调用栈执行。

2.3 微任务队列（Microtask Queue）

微任务队列用于存储优先级较高的异步任务，如 Promise 的回调函数。微任务队列中的任务会在当前调用栈清空后立即执行，优先于任务队列中的任务。

3. 异步执行顺序

3.1 setTimeout 和 Promise 的执行顺序

考虑以下代码：

console.log('1');

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

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

console.log('4');

输出结果为：

1
4
3
2

解释： 1. 同步代码 console.log('1') 和 console.log('4') 首先执行。 2. Promise.resolve().then(...) 是一个微任务，它会在当前调用栈清空后立即执行，因此 console.log('3') 在 console.log('4') 之后执行。 3. setTimeout 是一个宏任务，它会在所有微任务执行完毕后执行，因此 console.log('2') 最后执行。

3.2 async/await 的执行顺序

async/await 是 Promise 的语法糖，它使得异步代码看起来像同步代码。考虑以下代码：

async function asyncFunc() {
    console.log('1');
    await Promise.resolve();
    console.log('2');
}

console.log('3');
asyncFunc();
console.log('4');

输出结果为：

3
1
4
2

解释： 1. 同步代码 console.log('3') 首先执行。 2. asyncFunc 被调用，console.log('1') 执行。 3. await Promise.resolve() 会暂停 asyncFunc 的执行，并将控制权交还给调用栈，因此 console.log('4') 执行。 4. 当 Promise.resolve() 完成时，asyncFunc 继续执行，console.log('2') 最后执行。

4. 总结

JavaScript 的异步执行顺序遵循以下规则： 1. 同步代码优先执行。 2. 微任务（如 Promise 回调）在当前调用栈清空后立即执行。 3. 宏任务（如 setTimeout）在所有微任务执行完毕后执行。

理解这些规则有助于编写高效、可预测的异步代码。