前端常见问题汇总（十一）_融合AI

一、技术基础

1. 请简述-下JS 的事件循环机制，特别是微任务和宏任务的执行顺序。
   JavaScript 是单线程语言，通过事件循环机制实现异步操作。核心是协调调用栈、任务队列和微任务队列的执行。

核心概念

1. 调用栈
   执行同步代码,后进先出(LIFO)
2. 宏任务队列
   包括:setTimeout、setInterval、setImmediate(Node.js)、I/O、UI渲染
3. 微任务队列
   包括:Promise.then/catch/finally、process.nextTick(Node.js)、MutationObserver、queueMicrotask

执行顺序

┌─────────────────────────────────────┐

│ 事件循环流程 │

├─────────────────────────────────────┤

│ 1. 执行同步代码(调用栈) │

│ ↓ │

│ 2. 调用栈清空后 │

│ ↓ │

│ 3. 执行所有微任务(清空微任务队列) │

│ ↓ │

│ 4. 执行一个宏任务 │

│ ↓ │

│ 5. UI渲染(浏览器) │

│ ↓ │

│ 返回步骤2(新一轮循环) │

└─────────────────────────────────────┘

关键规则:每次宏任务执行完后,会清空所有微任务,再执行下一个宏任务

console.log('1. 同步代码');

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

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

console.log('4. 同步代码结束');

// 执行结果:
// 1. 同步代码
// 4. 同步代码结束
// 3. 微任务 - Promise
// 2. 宏任务 - setTimeout

记忆口诀

同步先行,微任务次之,宏任务垫后

每个宏任务之间,清空所有微任务