js 同步异步，宏任务微任务的关系

一、先分清：同步 vs 异步

1. 同步（Sync）

• 代码按顺序执行
• 必须等上一行执行完，才能执行下一行
• 会阻塞代码
• 例子：for 循环、普通赋值、console.log、计算

console.log(1)
console.log(2)
console.log(3)
// 输出：1 2 3

2. 异步（Async）

• 不会立刻执行，先放到"任务队列"
• 等所有同步代码执行完，才会执行异步
• 不阻塞代码
• 例子：定时器、ajax/fetch、Promise、事件

console.log(1)
setTimeout(() => console.log(2), 0)
console.log(3)
// 输出：1 3 2

---

二、核心重点：宏任务(Macrotask) vs 微任务(Microtask)

JS 异步任务分两类：宏任务 和 微任务。

执行规则（死记硬背）

1. 先执行所有同步代码
2. 再执行所有微任务
3. 最后执行宏任务

口诀：
同步 → 微任务 → 宏任务

---

三、哪些是宏任务？哪些是微任务？

宏任务（慢）

• setTimeout
• setInterval
• Ajax/fetch
• 事件监听（click、resize）
• requestAnimationFrame
• UI 渲染

微任务（快）

• Promise.then / catch / finally
• async/await（本质就是 Promise）
• queueMicrotask
• Vue nextTick
• Vue 的 DOM 更新、watch 回调

---

四、最经典的执行顺序题（必看）

console.log('1 同步')

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

Promise.resolve().then(() => {
  console.log('3 微任务')
})

console.log('4 同步')

输出结果：

1 同步
4 同步
3 微任务
2 宏任务

---

五、完整执行流程（底层原理）

1. 执行同步代码
2. 同步执行完 → 清空所有微任务
3. 微任务清空 → 执行一个宏任务
4. 宏任务执行完 → 又清空所有微任务
5. 循环往复...

---

六、和 Vue 的关系（超级重要）

• Vue 异步更新 DOM
• nextTick
• watch 的 flush

全部都是 微任务！

所以 Vue 事件循环顺序：
同步代码 → Vue DOM 更新（微任务）→ nextTick（微任务）→ 宏任务（setTimeout）

---

七、超级总结（必背）

1. 同步先跑，异步后跑
2. 异步分两种：微任务 > 宏任务
3. 执行顺序：同步 → 微任务 → 宏任务
4. Promise/await/nextTick 是微任务
5. setTimeout/ajax 是宏任务

---

一句话终极记忆

同步最先，微任务中间，宏任务最后！

需要我给你出 3 道前端面试必考的执行顺序题 让你练手吗？一做就彻底吃透。