《事件循环の夜店生存法则：别在微任务队列里跳广场舞！》-CSDN博客

本文链接：https://blog.csdn.net/zj0411zdh/article/details/148470600

事件循环夜店生存指南

在JavaScript的夜店里，事件循环是那个永不休息的DJ。主线程是舞池，微任务和宏任务则是两群性格迥异的客人。

console.log("保安大哥同步执行"); 
setTimeout(() => console.log("宏任务大叔慢慢晃进来"), 0);
Promise.resolve().then(() => console.log("微任务小姐姐插队成功"));

舞池优先级之争

微任务队列总爱插队，像穿着高跟鞋的时髦小姐姐。她们会在每首曲子间隙快速抢占舞池：

Promise回调
MutationObserver
process.nextTick

宏任务则像踩着拖鞋的大叔：

setTimeout
setInterval
I/O操作
UI渲染

// 夜店点单系统
bar.addEventListener('click', () => {
  Promise.resolve().then(() => console.log("VIP微任务优先调酒"));
  setTimeout(() => console.log("普通宏任务等叫号"), 0);
});

踩坑预警

在微任务里递归会产生永动机：

function microDance() {
  Promise.resolve().then(microDance); // 广场舞跳到天亮
}

而宏任务递归更像健康的有氧运动：

function macroDance() {
  setTimeout(macroDance, 0); // 每次休息后继续
}

生存法则黄金律

同步代码永远先霸占舞池
微任务能在当前曲子结束前截胡
宏任务老实排队等下个循环
渲染请求会被塞在宏任务之间

// 正确蹦迪姿势
button.addEventListener('click', () => {
  requestAnimationFrame(() => console.log("专业舞者卡点")); 
  Promise.resolve().then(() => updateDOM()); // 先更新妆容
});

记住：在事件循环夜店，谁掌握任务队列节奏，谁就是今晚的Party King！