js中的宏任务与微任务，全套教学资料

同步代码，语句1： 添加一个宏任务，将语句2推入MacroQueue。 // MacroQueue: [{task: 语句2}]

同步代码，语句3： 打印promise body

同步代码，语句4： 添加一个微任务，将语句5推入MicroQueue。 // MicroQueue: [{task: 语句5}]

同步代码，语句6： 打印main。 // 同步代码（宏任务）完成

第二步，开始清空微任务队列

微任务： 语句5,从MicroQueue跳出，打印promise then。 // 微任务队列全部清空

第三步，开始清空宏任务队列

宏任务：语句2，从MacroQqueue跳出，打印setTimeout // 宏任务队列全部清空

第四步：开始清空微任务队列

队列为空…

一轮循环完成。开始下一轮，如此循环下去。

通过上面的讲解，大家应该能对宏任务，微任务的运行机制有了一定的了解了吧。那么都有哪些常见的宏任务与微任务呢？

请看下表：

| 宏任务 | 浏览器 | nodejs |

| — | — | — |

| 同步代码 | ✅ | ✅ |

| I/O | ✅ | ✅ |

| setTimeout | ✅ | ✅ |

| setInterval | ✅ | ✅ |

| setImmediate | ❌ | ✅ |

| requestAnimationFrame | ✅ | ❌ |

| 微任务 | 浏览器 | nodejs |

| — | — | — |

| process.nextTick | ❌ | ✅ |

| MutationObserver | ✅ | ❌ |

| Promise （async/await） | ✅ | ✅ |

好了，我们来一道复杂一点的题练练手：

console.log(‘sync statement 1’);

Promise.resolve().then(function() {

console.log(‘micro task 1’);

setTimeout(function() {

console.log(‘macro task 1’);

}, 0);

}).then(function() {

console.log(‘micro task 2’);

});

setTimeout(function() {

console.log(‘macro task 2’)

Promise.resolve().then(function(){

console.log(‘micro task 3’);

})

}, 0)

console.log(‘sync statement 2’);

//输出：

// sync statement 1

// sync statement 2

// micro task 1

// micro task 2

// macro task 2

// micro task 3

// macro task 1

标注一下方便大家分析：

console.log(‘sync statement 1’); // 同步代码，语句1

Promise.resolve().then(function() { // 同步代码，语句2，注册了一个微任务

console.log(‘micro task 1’); // 微任务，语句3

小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数初中级Java工程师，想要提升技能，往往是自己摸索成长，但自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年最新Java开发全套学习资料》送给大家，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频

如果你觉得这些内容对你有帮助，可以添加下面V无偿领取！（备注Java）

最后

如果觉得本文对你有帮助的话，不妨给我点个赞，关注一下吧！

img-73FLzBI3-1710973277699)]

最后

如果觉得本文对你有帮助的话，不妨给我点个赞，关注一下吧！

[外链图片转存中…(img-fMgLmYQP-1710973277700)]

[外链图片转存中…(img-vP6lXfji-1710973277700)]

本文已被CODING开源项目：【一线大厂Java面试题解析+核心总结学习笔记+最新讲解视频+实战项目源码】收录