宏任务与微任务

一、宏任务

1、概念

        指消息队列中等地被主线程执行的事件

2、种类

        script主代码块、setTimeout 、setInterval 、nodejs的setImmediate 、MessageChannel（react的fiber用到）、postMessage、网络I/O、文件I/O、用户交互的回调等事件、UI渲染事件（DOM解析、布局计算、绘制）、Ajax 等等        

3、举例

setTimeout(() => {
  console.log("200");
});

二、微任务

 1、概念

        可以看成是一个需要异步执行的函数。

 2、种类

        Promise async/await 等。

 3、举例

Promise.resolve().then(() => {
  console.log("300");
});

三、区别

1、微任务会在宏任务之前执行

        即：主线程任务 => 异步任务（微任务 => 宏任务）

2、常用到的微任务 Promise.then

 new Promise在实例化的过程中所执行的代码是同步的，而在 then中注册的回调函数才是异步的.

new Promise(function(resolve){
    console.log('1'); // 主线程任务
    resolve();
}).then(function(){
    console.log('2') // 微任务
});

四、执行顺序

异步跟出场顺序有关系，不同类型(☞ 宏任务和微任务)的异步跟出场顺序就没关系了。

微任务比宏任务先执行。

console.log("100");
setTimeout(() => {
  console.log("200");
});
Promise.resolve().then(() => {
  console.log("300");
});
console.log("400");

//  输出结果为：100、400、300、200