宏任务与微任务解析-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_38189842/article/details/108096321

本文深入探讨了宏任务和微任务的区别，解释了它们如何影响JavaScript的执行流程，特别是在事件循环中的作用。通过具体示例，展示了宏任务与微任务的执行顺序，帮助读者理解并掌握这一关键概念。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

面试有问到，很长时间没记有点忘记了，记录学习下：

宏任务：setTimeout（web,node） setInterval（web,node） setImmediate（node） requestAnimationFrame（web）

微任务：process.nextTick（node） MutationObserver（web） Promise（node,web）

宏任务与微任务的区别：

为了让浏览器有序的渲染与js执行，一般宏任务执行完就会进行页面渲染，以此循环（Task -> Render）而微任务则是在宏任务执行完后插入的任务，如果没有微任务，那么Promise之类的会被当做宏任务，那么会Task => Render => Promise，而有了微任务的概念之后，那么就可以Tak => Promise => Render，这样可以大大的提高性能。当然要注意的一点是，如果微任务执行中又创建了一个微任务，那么这个微任务会放入队列末然后执行。

从图中可以看出当前Task执行完成后，会立即执行微任务，微任务全部执行完之后，进入下一个loop即事件循环。不过有趣的是，有一些微任务比如Promise，在有些低版本的浏览器当中，会被当作宏任务执行·，当然在这里还是按照标准来，首先先看一个简单的例子：

console.log('start')
setTimeout(() => {
    console.log('macro')
},0)
new Promise(resolve => {
    console.log('normal')
    resolve()
}).then(() => {
    console.log('micro')
})
console.log('stop')

输出结果分别是：start normal stop micro macro，只要知道微任务和宏任务这个应该能答对，再稍微改东西：

console.log('start')
new Promise(resolve => {
    console.log('normal')
    resolve()
})
.then(() => {
    setTimeout(() => {
        console.log('macro2')
    },0)
    console.log('micro')
})
.then(() => {
    console.log('micro2')
})
setTimeout(() => {
    console.log('macro')
},0)
console.log('stop')

结果输出分别是：start normal stop micro micro2 macro macro2，这里的关键点在于微任务中在执行微任务和宏任务，按照事件循环先将macro扔入宏任务，然后执行微任务，然后将micro2扔进当前微任务队列，将macro2扔入宏任务。

其实只要了解微任务和宏任务的机制，这类的问题都很简单，当然平时有可能不关注这点，到了面试的时候就会翻跟头，惨痛的教训..