JavaScript-微任务与宏任务

前端面试经典题：

const promise = new Promise((res, req) => {
  console.log(321);
  console.log(123);
  res()
})
promise.then(() => {
  console.log(666);
})
console.log('如果我是雨神 你还爱我吗');

执行顺序 321 123 如果我是雨神 你还爱我吗 666

JS执行是单线程：单线程是指Js引擎执行Js时只分了一个线程给他执行，也就是执行js时是单线程的。

同步任务：在主线程上排队执行的任务，只有前一个任务执行完毕，才能执行后一个任务；
异步任务：不进入主线程、而进入"任务队列"（task queue）的任务，只有等主线程任务执行完毕，"任务队列"开始通知主线程，请求执行任务，该任务才会进入主线程执行。

JavaScript的任务分为微任务（Microtasks）和宏任务（task）；

宏任务是主流，当js开始被执行的时候，就是开启一个宏任务，在宏任务中执行一条一条的指令； 宏任务可以同时有多个，但会按顺序一个一个执行；
每一个宏任务，后面都可以跟一个微任务队列，如果微任务队列中有指令或方法，那么就会执行；如果没有，则开始执行下一个宏任务，直到所有的宏任务执行完为止，微任务相当于宏任务的小尾巴；
为什么有了宏任务，还会有微任务存在？因为宏任务太占用性能，当需要一些较早就准备好的方法，排在最后才执行的时候，又不想新增一个宏任务，那么就可以把这些方法，一个一个的放在微任务队列里面，在这个宏任务中的代码执行完后，就会执行微任务队列。

宏任务 微任务有哪些

宏任务-macro task：script(整体代码)、 setTimeout,、 setInterval,、 setImmediate、 I/O, UI、 rendering（定时器、事件绑定、ajax、回调函数、Node中fs可以进行异步的I/O操作）等…
微任务-micro task： Promises,、Object.observe、 process.nextTick （node中实现的api，把当前任务放到主栈最后执行，当主栈执行完，先执行nextTick，再到等待队列中找）、MutationObserver（创建并返回一个新的 MutationObserver 它会在指定的DOM发生变化时被调用）等…

setTimeout(function () {
  console.log('1')
});

new Promise(function (resolve) {
  console.log('2');
  resolve();
}).then(function () {
  console.log('3')
});

yus()
console.log('4');

function yus (res, req) {
  console.log(5);
}
new Promise(yus)

需要注意的是：Promise并不是完全的同步，执行resolve或者reject的时候，此时是异步操作，会先执行then/catch，当主栈完成后，才会再去调用resolve/reject把存放的方法执行

执行顺序 2 5 4 5 3 1

console.log('1');

setTimeout(function () {
  console.log('2');
  process.nextTick(function () {
    console.log('3');
  })
  new Promise(function (resolve) {
    console.log('4');
    resolve();
  }).then(function () {
    console.log('5')
  })
})
process.nextTick(function () {
  console.log('6');
})
new Promise(function (resolve) {
  console.log('7');
  resolve();
}).then(function () {
  console.log('8')
})

setTimeout(function () {
  console.log('9');
  process.nextTick(function () {
    console.log('10');
  })
  new Promise(function (resolve) {
    console.log('11');
    resolve();
  }).then(function () {
    console.log('12')
  })
})

执行顺序 1 7 6 8 2 4 3 5 9 11 10 12
!!! 请注意，node环境下的事件监听依赖libuv与前端环境不完全相同，输出顺序可能会有误差