宏任务与微任务

要想说清楚到底宏任务和微任务是什么？是谁发起的？为什么微任务的执行要先于宏任务呢？

首先，我们需要先知道 JS 运行机制。

 JS 运行机制

js 是单线程脚本语言，在需要执行异步任务时，就需要浏览器协助完成，形成一套事件循环机制(event loop)。

浏览器在完成 js 交给的异步任务后，会在 js 的回调队列中插入一个任务，等待 js 的同步任务执行完成后调用执行，比如计时器、网络请求等等，虽说异步任务都放在等待队列中，但还是有区别的，分宏任务和微任务(猜测按优先级划分？)，js 在调用时，优先取出微任务，并且在执行过程中如果创建了新的作业，则放在本次执行完后紧接着调用，微任务执行完成后，再取出宏任务执行。

宏任务、微任务有哪些

宏任务包括：

script(整体代码), setTimeout, setInterval, setImmediate, I/O, UI rendering。

微任务包括：

Promises, Object.observe, MutationObserver

 宏任务、微任务的执行顺序

1.先执行同步代码，

2.遇到异步宏任务则将异步宏任务放入宏任务队列中，

3.遇到异步微任务则将异步微任务放入微任务队列中，

4.当所有同步代码执行完毕后，再将异步微任务从队列中调入主线程执行，

5.微任务执行完毕后再将异步宏任务从队列中调入主线程执行，

6.一直循环直至所有任务执行完毕。

 案例

setTimeout(function(){

console.log('1');

});

new Promise(function(resolve){  

 console.log('2');

resolve();

}).then(function(){  

 console.log('3');

});  

 console.log('4');

解析：

遇到 setTimout，异步宏任务，放入宏任务队列中；

遇到 new Promise，Promise 在实例化的过程中所执行的代码都是同步进行的，所以输出 2；

而 Promise.then 中注册的回调才是异步执行的，将其放入微任务队列中

遇到同步任务 console.log(‘4’);输出 4；主线程中同步任务执行完

从微任务队列中取出任务到主线程中，输出 3，微任务队列为空

从宏任务队列中取出任务到主线程中，输出 1，宏任务队列为空，结束

输出：2 4 3 1