JavaScript中宏任务由宿主环境提供，属Web API而非JS引擎语法，每次事件循环执行一个，执行后清空微任务、渲染DOM再取下一个宏任务；常见类型包括setTimeout/setInterval、DOM事件、XHR/fetch响应回调、requestAnimationFrame、postMessage及script加载。
JavaScript 中的宏任务由宿主环境（浏览器或 Node.js）提供，不是 JavaScript 引擎自身定义的语法特性，而是 Web API 的一部分。它们被推入**回调队列（Callback Queue）**，每次事件循环只执行一个，且执行完后会先清空所有微任务，再渲染 DOM，然后取下一个宏任务。
常见的宏任务 Web API
以下都是浏览器环境中典型的宏任务来源，调用后注册的回调会在未来某个时机作为独立宏任务进入队列：
- 定时器类：`setTimeout()`、`setInterval()` —— 即使延时为 0，回调也属于宏任务
- DOM 事件回调：如 `click`、`input`、`scroll`、`load` 等通过 `addEventListener` 绑定的处理函数
- 网络请求完成回调：XMLHttpRequest 的 `onload`、`onerror`；Fetch 的底层响应处理（注意：`.then()` 是微任务，但 fetch 请求触发和响应就绪本身是宏任务级调度）
- UI 渲染相关：`requestAnimationFrame()` —— 在下一次重绘前执行，属于高优先级宏任务
- 消息通信类：`postMessage()` 触发的 `message` 事件、`MessageChannel.port.onmessage` 回调
- 脚本加载：`<script>` 标签同步执行内容、动态插入 script 的 `onload` 回调</script>
容易混淆的点
有些 API 表面相似，但任务类型不同，需特别注意：
- `Promise.then()`、`async/await` 后续代码 → 属于微任务，不是宏任务
- `queueMicrotask()` 显式加入微任务队列 → 微任务
- `fetch()` 本身是宏任务触发源，但它的 `.then()` 或 `await` 后逻辑属于微任务
- `MutationObserver` 回调 → 微任务（尽管监听的是 DOM 变化，但它由 JS 引擎调度）
为什么区分宏任务和微任务重要
因为执行顺序直接影响代码行为和 UI 响应节奏：
立即学习“Java免费学习笔记（深入）”；
- 所有同步代码执行完 → 立即执行本轮全部微任务（无中断）→ 浏览器可能进行 DOM 渲染 → 再从回调队列取一个宏任务
- 这意味着：在一次点击事件（宏任务）中创建的 Promise.then，会比下一个 setTimeout 回调更早执行
- 实际开发中，若需确保 DOM 更新已生效再做操作（比如获取元素尺寸），常需用 `requestAnimationFrame()` 或 `setTimeout(fn, 0)` 来“让出”到下一个宏任务周期
