「Event Loop」事件循环

我们先来看一下HTML标准的解释：为了协调事件event，用户交互user interaction，脚本script，渲染rendering，网络networking等，用户代理user agent必须使用事件循环「Event Loop」。

「event-loop」是解决JS单线程运行阻塞的一种机制，在JS的异步运行机制中，我们需要知道：

• 所有的「同步任务」都在主线程进行

• 「异步任务」进入任务队列，任务队列会通知主线程，哪个异步任务可以执行，这个异步任务就会进入主线程。异步任务必须指定回调函数，当主线程开始执行异步任务，其实就是在执行对应的回调函数。

• 如果主线程的所有同步任务都执行完，系统就会去读取「任务队列」上的异步任务，如果有可以执行的，就会结束等待状态，进入主线程，开始执行。

• 主线程不断的执行第3步

这就是JS的运行机制，也称为「Event Loop」事件循环。

「宏任务」macrotasks：script（整体代码）、setTimeout、setInterval、setImmediate、I/O、UI rendering「微任务」microtasks：process.nextTick（NodeJS）、Promise、Object.observe、MutationObserver

理解事件循环（简单例子）：

console.log('script start')

setTimeout(() => {
  console.log('setTimeout')
}, 0)

Promise.resolve().then(() => {
  console.log('Promise 1')
}).then(() => {
  console.log('Promise 2')
})

console.log('script end')

//运行结果
//script start
//script end
//Promise 1
//Promise 2
//setTimeout

过程分析：

1、task队列中只有script，则将script中所有函数放进函数执行栈按顺序执行 2、接下来遇到setTimeout，这里的setTimeout只是将回调函数在0毫秒后放入task队列（其实是4ms，html5标准中规定中要求setTimeout中低于4ms的时间间隔算为4ms），也就是说回调函数在下一个事件循环执行，setTimeout在这里将回调函数放至task列表后就结束了。3、遇到Promise，属于「microtasks」，所以将第一个then的回调放到microtasks队列 4、执行完所有script代码后，检查microtasks队列，发现队列不为空，所以执行第一个回调函数输出'Promise 1'，由于then的返回仍然是Promise，因此将第二个then的回调放至microtasks队列并执行输出'Promise 1' 5、此时microtasks队列为空，开始执行下一个事件循环。检查task队列发现setTimeout的回调函数，因此执行输出'setTimeout'