面试题2、讲一讲JS运行机制、微任务、宏任务、事件循环

1、JS代码从上往下执行，所有同步任务都会在主线程中执行，形成一个执行栈；

2、主线程之外，还有一个任务队列，当发现一个异步任务，就塞一个事件（回调函数）到任务队列中等待；

3、一旦执行栈中所有同步代码执行完毕，系统就会读取任务队列，看看里面有哪些事件（回调函数）。于是结束等待状态，进入执行栈，开始执行。

4、主线程不断重复第三步，形成事件循环。

===============================================================================

学习背景：事件循环 是 JavaScript 管理异步任务的核心机制，它遵循 "宏任务 → 清空所有微任务 → 渲染（如有需要）→ 下一轮宏任务" 的循环顺序执行，从而保证了代码的有序性和渲染的高效性。

js中，解释下宏任务与微任务，我没区分开这两个东西

**注意：微任务与宏任务都是异步任务**

终极一句话总结（面试满分）
1、同步优先，微任务插队，宏任务最后；
2、必须清空所有微任务，才会执行宏任务。
JS 执行顺序：同步先跑 → 微任务全清空 → 才跑下一个宏任务。

1. 什么是微任务（microtask）

可以理解成：JS 引擎自身的 "小任务"，优先级更高。

常见微任务：

1. Promise.then / catch / finally
2. async/await（本质就是 Promise）
3. queueMicrotask()
4. MutationObserver

特点：会一次性全部执行完；只要有微任务，必须清空队列，才允许执行下一个宏任务；

2. 什么是宏任务（macrotask）

可以理解成：来自浏览器 / 宿主环境的 "大任务"。

==常见宏任务：

1. setTimeout
2. setInterval
3. I/O 操作（ajax、fetch）
4. UI 渲染
5. requestAnimationFrame
6. 事件队列（click、load 等）

特点：每次只执行一个；执行完必须等微任务全部清空，才会执行下一个宏任务。

3. 最关键的执行顺序（必考）

先执行 同步代码（立刻跑）

执行当前所有 微任务（全部清空）

然后 才执行下一个宏任务（一个）

再清空微任务 → 再下一个宏任务... 循环

4. 超级经典示例（一看就懂）

console.log('1 同步')

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

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

console.log('4 同步')

输出顺序：1 → 4 → 3 → 2

• 1、4 是同步 → 最先执行
• 3 是微任务 → 同步完立刻执行
• 2 是宏任务 → 最后执行

5. 最容易搞混的点（我帮你点破）

await 后面的代码 = 微任务

setTimeout 永远比 Promise.then 慢

微任务可以插队宏任务！

微任务没清空，绝对不会执行下一个宏任务