JavaScript 事件循环宏任务与微任务实例详解

// 宏任务示例
setTimeout(() => {
  console.log('setTimeout - 宏任务');
}, 0);
setInterval(() => {
  console.log('setInterval - 宏任务');
}, 1000);
// I/O 操作
fs.readFile('file.txt', (err, data) => {
  console.log('I/O 操作 - 宏任务');
});
// UI 渲染（浏览器）
// 页面渲染本身也是一个宏任务

// Promise - 微任务
Promise.resolve().then(() => {
  console.log('Promise.then - 微任务');
});
// MutationObserver - 微任务
const observer = new MutationObserver(() => {
  console.log('DOM 变化 - 微任务');
});
// process.nextTick (Node.js) - 微任务
process.nextTick(() => {
  console.log('process.nextTick - 微任务');
});
// queueMicrotask API
queueMicrotask(() => {
  console.log('queueMicrotask - 微任务');
});

console.log('1. 同步代码开始');
setTimeout(() => {
  console.log('6. setTimeout - 宏任务');
}, 0);
Promise.resolve().then(() => {
  console.log('4. Promise 1 - 微任务');
}).then(() => {
  console.log('5. Promise 2 - 微任务');
});
queueMicrotask(() => {
  console.log('3. queueMicrotask - 微任务');
});
console.log('2. 同步代码结束');
// 执行结果：
// 1. 同步代码开始
// 2. 同步代码结束
// 3. queueMicrotask - 微任务
// 4. Promise 1 - 微任务
// 5. Promise 2 - 微任务
// 6. setTimeout - 宏任务

console.log('脚本开始');
setTimeout(() => {
  console.log('setTimeout 1');
  Promise.resolve().then(() => {
    console.log('Promise in setTimeout');
  });
}, 0);
Promise.resolve().then(() => {
  console.log('Promise 1');
  return Promise.resolve();
}).then(() => {
  console.log('Promise 2');
  setTimeout(() => {
    console.log('setTimeout in Promise');
  }, 0);
});
console.log('脚本结束');
// 执行结果：
// 脚本开始
// 脚本结束
// Promise 1
// Promise 2
// setTimeout 1
// Promise in setTimeout
// setTimeout in Promise

// 不好的做法：可能导致多次重排
function updateMultipleElements() {
  element1.style.color = 'red';
  element2.style.color = 'blue';
  element3.style.color = 'green';
}
// 好的做法：使用微任务批量更新
function updateMultipleElementsOptimized() {
  queueMicrotask(() => {
    element1.style.color = 'red';
    element2.style.color = 'blue';
    element3.style.color = 'green';
  });
}

// 在状态更新后执行某些操作
let state = { count: 0 };
function updateState(newCount) {
  state.count = newCount;
  // 使用微任务确保在状态更新后执行
  Promise.resolve().then(() => {
    console.log('状态已更新:', state.count);
    updateUI();
  });
}

// 确保在处理用户输入前完成所有微任务
button.addEventListener('click', () => {
  // 同步代码
  console.log('按钮被点击');
  // 微任务 - 在渲染前执行
  Promise.resolve().then(() => {
    console.log('处理点击的微任务');
  });
  // 宏任务 - 在渲染后执行
  setTimeout(() => {
    console.log('处理点击的宏任务');
  }, 0);
});

// 错误示例：会导致微任务无限循环
function infiniteMicrotask() {
  Promise.resolve().then(() => {
    console.log('微任务执行');
    infiniteMicrotask(); // 递归调用
  });
}
// 正确做法：使用宏任务打破循环
function safeRecursiveTask() {
  Promise.resolve().then(() => {
    console.log('微任务执行');
    // 使用 setTimeout 让出控制权
    setTimeout(safeRecursiveTask, 0);
  });
}

// Node.js 与浏览器的微任务优先级差异
console.log('start');
Promise.resolve().then(() => {
  console.log('Promise');
});
process.nextTick(() => {
  console.log('nextTick');
});
console.log('end');
// Node.js 输出：
// start
// end
// nextTick
// Promise
// 浏览器输出（无 process.nextTick）：
// start
// end
// Promise

// 根据场景选择任务类型：
// 紧急的、需要立即执行的任务 - 使用微任务
function urgentTask() {
  queueMicrotask(() => {
    // 立即执行但不在当前调用栈
  });
}
// 不紧急的、可以延迟的任务 - 使用宏任务
function lazyTask() {
  setTimeout(() => {
    // 可以等待的任务
  }, 0);
}
// 需要让浏览器渲染的任务 - 使用宏任务
function renderTask() {
  setTimeout(() => {
    // 确保 UI 有机会更新
  }, 0);
}

console.log('同步 1');
setTimeout(() => console.log('宏任务 1'), 0);
Promise.resolve()
  .then(() => console.log('微任务 1'))
  .then(() => console.log('微任务 2'));
console.log('同步 2');

// 标记任务执行时间
performance.mark('task-start');
// 执行一些操作
doSomeWork();
performance.mark('task-end');
performance.measure('task-duration', 'task-start', 'task-end');