Event Loop我知道，宏任务微任务是什么鬼？

在介绍宏任务和微任务以前，先抛出一个问题。相信你们在面试的时候，会遇到这样的类似的问题：

setTimeout(function(){
 console.log('1')  });  new Promise(function(resolve){   console.log('2');   resolve();  }).then(function(){  console.log('3')  });  console.log('4');  复制代码

请说出控制台打印的数据，不少小伙伴通过深思熟虑以后，会自信的说出答案：二、四、一、3。

可是说出答案以后每每会发现面试官并无出现很满意的表情。这是为何呢？接下来让咱们一步一步的探讨面试官不满意的缘由。

JavaScript事件循环机制

首先仍是说说JavaScript的事件循环机制，你们都知道，js的执行任务分为同步任务和异步任务，那么他们的执行状况是怎么样的尼？执行的时候，会优先执行同步任务，当执行中遇到了异步任务，会暂时将异步任务扔到异步队列中，继续执行后面的同步任务。当全部的同步任务执行完成以后，再执行刚才扔在异步队列中的任务。一直循环执行，也就造成了咱们JavaScript的Event Loop机制。

可能纯文字的介绍你们看得有点绕，下面引入一张图片来帮助你们理解JavaScript事件循环机制：

看完这个图，各位小伙伴可能会以为，我上面的答案没有问题呀，是正确的呀！可是事情并非那么的简单，接下来引入两个新概念：宏任务（macrotask）和微任务（microtask）

宏任务（macrotask）和微任务（microtask）

宏任务和微任务表示的是异步任务的两种分类。在浏览器js引擎加载js代码的时候，会将全部的代码以任务的形式分别分配到这两个分类的队列中。而后首先会从宏任务的任务队列中中取出一条任务执行；当执行完毕以后再将微任务队列里面的全部的任务按照顺序执行；当全部的微任务队列任务执行完毕以后，再去宏任务队列中取出一条任务执行。

宏任务主要有：总体script代码、setTimeout、setInterval、I/O、requestAnimationFrame 微任务主要有：Promise、process.nextTick、MutationObserver

那么宏任务和微任务究竟是什么关系呢？接下来，奉上一张宝图，描述二者的关系：

相信，看到这里，你们已经知道上面的问题的答案了吧，没错，就是二、四、三、1。

最后，若是你们想和我一块儿讨论探索前端，能够关注一下个人公众号，不按期更新干货，更可加入技术群交流讨论。

本文使用 mdnice 排版