JavaScript事件循环、微任务与MutationObserver全面解析

1️⃣ 事件循环（Event Loop）核心机制

事件循环是浏览器协调任务执行的核心机制，用于调度事件、用户交互、脚本执行和渲染。其运行流程分为三个阶段：

任务队列（Task Queue）
从宏任务队列中选取一个可执行任务（如setTimeout、I/O操作），执行完毕后进入下一阶段。
微任务队列（Microtask Queue）
执行所有微任务（如Promise.then()、MutationObserver），直到队列清空。此阶段会阻塞渲染。
渲染更新（Rendering）
根据浏览器刷新率（通常60Hz，间隔16.67ms）决定是否更新UI。非每次循环必触发。

💡 关键特性：微任务队列执行优先级高于宏任务，且在同一事件循环中连续执行直至清空。

2️⃣ 宏任务（Macrotask）与微任务（Microtask）对比

类型	常见API	执行时机	队列特性
宏任务	`setTimeout`, `setInterval`, `I/O`, UI渲染	每次循环执行一个	多队列（按任务源分组）
微任务	`Promise.then()`, `queueMicrotask()`, `MutationObserver`	宏任务结束后立即执行所有	单队列（先进先出）

执行顺序示例：

setTimeout(() => console.log('宏任务'), 0);
Promise.resolve().then(() => console.log('微任务'));
// 输出：微任务 → 宏任务

3️⃣ MutationObserver的工作原理与应用

3.1 核心机制

异步监听DOM变化，回调函数属于微任务，在DOM修改后、渲染前执行。
批量处理：连续DOM变更合并为一次回调，通过MutationRecord数组传递变更详情。

3.2 使用步骤

// 1. 创建观察器
const observer = new MutationObserver((mutations) => {
  mutations.forEach(m => console.log('DOM已变更', m.type));
});

// 2. 配置观察选项
const config = {
  attributes: true,    // 监听属性变化
  childList: true,    // 监听子节点变化
  subtree: true       // 监听所有后代节点
};

// 3. 启动观察
observer.observe(document.body, config);

// 4. 触发变更（需手动修改DOM属性）
document.body.setAttribute('data-test', Date.now()); // ✅ 必须主动触发变更

// 5. 停止观察
// observer.disconnect();

3.3 常见问题

回调未触发：未实际修改DOM属性（如仅注册观察但未调用setAttribute）。
性能优化：通过attributeFilter限定监听属性（如['class', 'style']）。

4️⃣ 实际开发注意事项

微任务递归风险
微任务中递归添加微任务会导致阻塞渲染（例：queueMicrotask内递归调用自身）。

function recursiveMicrotask() {
  queueMicrotask(() => {
    // 长时间操作将冻结UI
    recursiveMicrotask(); 
  });
}

跨浏览器兼容方案
老旧浏览器需降级处理：

function runMicrotask(func) {
  if (typeof Promise !== 'undefined') {
    Promise.resolve().then(func);
  } else if (typeof MutationObserver !== 'undefined') {
    const obs = new MutationObserver(func);
    obs.observe(document.body, { attributes: true });
    document.body.setAttribute('microtask-trigger', Date.now()); // 必须触发变更
  } else {
    setTimeout(func, 0);
  }
}

Node.js差异
process.nextTick优先级高于Promise，属于独立队列。

5️⃣ 总结与最佳实践

优先使用 queueMicrotask 替代 Promise.resolve().then()，避免创建冗余Promise实例。
慎用微任务递归：避免长时间阻塞主线程，复杂任务拆分为宏任务。
MutationObserver适用场景：
- 监听特定元素属性变更（如表单动态验证）
- 实现防篡改水印（DOM删除后自动重建）
- 替代已废弃的Object.observe