不过，

如果你正在准备技术面试。“请详细阐述事件循环的工作原理，还有宏在编程中的应用。” 这类问题往往让人手忙脚乱。下面用清晰的结构和实例方便你找到关键概念。既能回答面试官，又能提高自己的技术思维。

1️⃣ 事件循环基础：单线程、非阻塞、异步

JavaScript 是单线程运行的，但通过事件循环实现了非阻塞、异步的行为。它决定了代码何时执行、异步任务如何排队还有页面何时渲染，是理解 JS 异步编程的关键。

1️⃣① 同步 → 微任务 → 渲染 → 宏任务

一句话口诀：synchronous code → microtasks → render → macrotasks

2️⃣ 宏任务与微任务的区别与优先级

事件循环把异步任务分为两大类：

• 宏任务
• 微任务

宏任务

每一次事件循环只取并执行一个宏任务，接下来检查微任务队列。

遵循先进先出 队列机制。

微任务

优先级高于宏任务

• PROMISE.n/catch/finally
• AWSYNC/await
• queueMicrotask
• MutationObserver

每次宏任务执行完后会一次性清空所有微任务队列接下来才进入下一个宏任务或渲染阶段。

3️⃣ 标准执行流程

1. Synchronous code
2. Synchronous complete ➜ 清空所有微任务队列
3. 检查是否需要 UI 渲染
4. 渲染完成后 ➜ 执行下一个宏任务

关键点的观点是，

• - 微任务会阻塞渲染；页面不会在微任务未结束前更新。
• - DOM 修改在同一次循环内统一生效。
• - 宏任务一定在渲染完成后才运行。

4️⃣ 浏览器渲染时机 & 性能陷阱

. 渲染触发时机

• 微任务清空之后、下一个宏任务之前执行
• 不是每个事件循环都必然渲染。浏览器会合并多次 DOM 更改做一次绘制，以避免频繁重排重绘。
• "如果你看到 console.log 在 Promise.n 后立即输出。却没有看到页面变化，那说明页面正在等待下一轮渲染。" – 面试中常见疑问点。

“为什么 setTimeout 的回调总是比 Promise.n 晚？” 答：因为 setTimeout 属于宏 task。而 Promise.n 属于 micro task，前者必须等后者全部执行完才能开始。

微妙细节

Node.js 与浏览器的差异

• 说到Brower，只有 **一个** 宏 task 队列。按理说， : 分为 timers、pending callbacks 等六个阶段。每个阶段切换时都会清空对应的 micro task 队列。

async/await 本质

• "async/await 是 Promise 的语法糖"——`await` 后面的表达式会被包装成 ``，所以其优先级高于定时器和网络请求。

性能影响

• 过多 microTask 会导致 **渲染阻塞**，页面卡顿；说起来，尽量避免在 microTask 内部放置耗时逻辑。

渲染线程互斥

• JS 执行与 DOM 渲染共用同一线程； 当 microTask 阻塞时渲染也被阻塞，引起卡顿或 jank。

#macro 在编程中的实际意义和使用场景 #macro 在编程中的实际意义和使用场景

什么是 “Macro”？

• C / C++ : #define 和 #include 等预处理指令，用来生成代码片段或条件编译。
• Rust / Lisp / Elixir : 编译期展开自定义代码块，实现 DSL 或复用逻辑。
• JavaScript : 虽然没有内置预处理器。但可通过 Babel/Macro 插件，在建立阶段将标记替换成完整实现，例如 @babel/plugin-macros。
• Build 程序 : Makefile、Gradle 等使用变量与函数式规则，实现配置化建立流程。

Macro 的优势

常见痛点

• 调试难度 – 宏展开后代码不直观，需要查看展开结果才能定位错误。
• 名称冲突 – 宏仅按文本替换，易产生意外覆盖。
• 可维护性低 – 大型项目中宏堆积容易导致依赖链混乱。按理说，

🕒 一分钟面试简洁版

html