js的事件循环机制和任务队列

上篇讲异步的时候，提到了同步队列和异步队列的说法，其实只是一种形象的称呼，分别代表主线程中的任务和任务队列中的任务，那么此篇我们就来详细探讨这两者。

一、来张图感受一下

如果看完觉得一脸懵逼，请继续往下看。

二、解析

我们还是拿上篇的例子做解析

step1：f1、Promise对象实例化、f2被放入主线程的堆内存中；

step2：Promise对象实例化后的同步代码块被放入主线程的执行栈中执行，并且产生的异步任务被放入任务队列；

step3：f1被放入主线程的执行栈中执行（打印“我是F1”），for循环产生的1000个定时器（异步任务）放入任务队列；

step4：f2被放入主线程的执行栈中执行，连续5次；

step5：至此，主线程的执行栈中已经没有任务了，于是事件循环（event loop）机制从任务队列中取出一个任务放入主线程的执行栈中执行；

step6：等待主线程的执行栈中又没有任务了，事件循环机制再次去任务队列中取出任务；

step7：重复第6步。

三、任务队列

上面提到了任务队列，任务队列就是等候执行的一系列任务，就好比锅里的饭，你只有把碗里的饭吃完了，才能再次去锅里再盛一碗（不要杠！）；

只有主线程的执行栈中没有了任务，事件循环机制才会去任务队列拿任务去执行。

由刚开始的图，你也看到了，任务队列是分不同类别并且是有优先级的。

任务队列又分为macro-task（宏任务）和micro-task（微任务）;
macro-task大概包括：script（整体代码）,setTimeout,setInterval,setImmediate,I/O,UI rendering;
micro-task大概包括：process.nextTick,Promise,Object.observe(已废弃),MutationObserver(html5新特性)
setTimeout/Promise等我们称之为任务源。而进入任务队列的是他们指定的具体执行任务。
来自不同任务源的任务会进入到不同的任务队列

优先级的话，micro-task > macro-task；

对于micro-task：process.nextTick > Promise.then

对于macro-task：setTimeout > setImmediate

具体的案例演示，请参照这篇文章：事件循环的顺序（优先级）

四、简单demo带你理解事件循环

Promise.resolve().then(()=>{

  console.log('Promise1')

  setTimeout(()=>{

    console.log('setTimeout2')

  },)

})

setTimeout(()=>{

  console.log('setTimeout1')

  Promise.resolve().then(()=>{

    console.log('Promise2')

  })

},)

step1：

分析：开始任务队列里有微任务promise1和宏任务timeout1，第一次事件循环一看有微任务，二话不说，直接拿promise1到主线程跑（其实是跑完所有的微任务）；promise1运行结果是，控制台打印promise1，并生成一个宏任务timeout2。