一、宏任务可以理解为一次“大的任务”常见宏任务有setTimeout setInterval setImmediate // Node.js I/O UI 事件 script 整体代码二、微任务可以理解为当前宏任务结束后马上要补充执行的小任务常见微任务有Promise.then / catch / finally queueMicrotask MutationObserver process.nextTick // Node.js优先级更高一些三、执行顺序执行完一轮宏任务队列产生的宏任务放入下一轮宏任务队列比如 setTimeout - 清空微任务队列 - 清空微任务产生的微任务 - 执行下一轮宏任务队列注意微任务队列要一次性清空。也就是说微任务里面又产生了新的微任务也会继续执行直到微任务队列为空。四、执行例子1、例子一console.log(script start) setTimeout(() { console.log(setTimeout) }, 0) Promise.resolve().then(() { console.log(promise1) }).then(() { console.log(promise2) }) console.log(script end)执行结果script start script end promise1 promise2 setTimeout其中 setTimeout 被下放至下一轮宏任务队列2、例子二setTimeout(() { console.log(macro) }, 0) Promise.resolve().then(() { console.log(micro) }) console.log(sync)结果sync micro macro这个没啥好说的3、例子三Promise.resolve().then(() { console.log(micro1) Promise.resolve().then(() { console.log(micro2) }) }) setTimeout(() { console.log(macro) }, 0)结果micro1 micro2 macro第一轮宏任务视为已经执行了将 setTimeout 插入下一轮宏任务队列的动作然后执行清空微任务队列然后执行下一轮宏任务队列 setTimeout五、和页面渲染关系浏览器大致流程是宏任务 ↓ 微任务全部清空 ↓ 可能渲染页面 ↓ 下一个宏任务所以如果你一直创建微任务页面可能没机会渲染function loop() { Promise.resolve().then(loop) } loop()这会不断塞微任务浏览器可能无法及时渲染页面会卡住。
