标准中对 event-loops 的描述

为了协调事件，用户交互，脚本，渲染，网络等，用户代理必须使用本节所述的事件循环。有两种事件循环：browsing contexts 和 workers。

每一个用户代理至少有一个 browsing contexts 事件循环，而一个 browsing contexts 事件循环至少有一个 browsing contexts，二者相互依存，一个 browsing contexts 总是有一个事件循环来协调其活动。 worker 事件循环也是类似的，并且 worker 进程模型管理其事件循环的生命周期。

一个事件循环有一至多个任务队列（task queues），而一个任务队列是一个有序的任务列表。
任务的算法如下:

事件 Events
在特定的 EventTarget
分发一个 Event 对象通常认为是一种特定任务。
注：并非所有事件都使用任务队列分发，也有许多事件在其他任务 (other tasks) 中分派。
解析 Parsing
解析 HTML 一个或多个字节然后处理结果令牌(tokens)也是一个典型的任务。
回调 Callbacks
调用一个回调通常属于特定的任务。
使用资源 Using a resource
当算法以非阻塞方式获取资源时，那么等到该资源可用时，对资源的处理属于一个任务。
响应 DOM 操作 Reacting to DOM manipulation
一些具有响应DOM操作元素也属于任务。例如：插入元素到 DOM 中。

一个事件循环有一个当前正运行的任务(currently running task)，初始值为 null。

一个事件循环也有一个微任务执行检查点(performing a microtask checkpoint flag) ，初始值为 false，

一个事件循环有一个微任务队列。

事件循环的运行步骤如下:

1.在一个事件循环的一个任务队列中选出最旧(最先进队列)的任务，如果没有，则跳入 Microtasks 步骤。
2.将上一步选择的任务设置为事件循环当前正运行的任务。(flag)
3.运行选择的任务。
4.事件循环当前正运行的任务设置回 null。
5.将刚才选择的任务从任务队列中移除。
6.Microtasks 步骤：执行一个微任务(Microtasks)检查点。
7.更新渲染的内容：不同的事件循环有不同的副步骤。
8.返回第一步。

微任务检查点步骤：

如果检查点的值为 false，
1.令检查点的值为 true。
2.处理微任务队列：如果微任务队列为空，则跳转到完成(Done) 步骤
3.选择队列中最旧的微任务。
4.设置事件循环的当前运行任务为上一步选择的任务。
5.运行选择的任务。
6.设置事件循环的当前运行任务为 null。
7.从微任务队列中移除该任务，回到处理微任务队列步骤(2)。
8.完成(Done)：
9.清理索引数据库。
10.令检查点的值为 false。

规范说明有两种微任务：孤立回调微任务(solitary callback microtasks)和复合微任务(compound microtasks)。（但是规范并没指出哪些任务是微任务）

note: 执行 promise 相关的 enqueuejob 会产生一个微任务。

总结

根据以上的内容可以绘出如下 event loop 大致概念图：
此图当前的状态是正在执行任务队列1中的任务1的微任务1。

需要注意的是规范里没有明说哪些是微任务哪些属于任务，但是通常的认知如下(出处)：

task——setTimeout、setInterval、setImmediate、I/O、UI rendering
microtask——process.nextTick、promise、Object.observe、MutationObserver

实践学习

现有如下代码，思考输出的内容。

console.log('start')

setTimeout( function () {
  console.log('setTimeout')
}, 0 )

Promise.resolve().then(function() {
  console.log('promise1');
}).then(function() {
  console.log('promise2');
});

console.log('end')

首先你要知道，我们默认以上代码是以 script 标签嵌入在 html 内的，相当于 Using a resource ，也就是处理 script 标签内的代码相当于处理一个任务；当然你也可以说我给 script 的属性 async设为 true，那么之后处理该脚本时相当于回调 Callbacks，仍然是处理一个任务。
处理该任务前的主执行栈应该是空的，如果不是空的，那应该先执行完主执行栈的内容才会去获取 event loop 内的任务；

回顾上文提到的 “事件循环的运行步骤”，先选出任务队列中最旧的任务，也就是上述的 script 脚本解析任务，设置为当前运行任务。
于是此时的 event loop 应该是这样的；

image.png

然后是步骤3.运行选择的任务
于是我们逐行解析 script 脚本内的内容：

//进入主执行栈
console.log('start')

//做为 task 进入到 event loop
setTimeout( function () {
  console.log('setTimeout')
}, 0 )

//做为 microtask 进入到 event loop
Promise.resolve().then(function() {
  console.log('promise1');
}).then(function() {
  console.log('promise2');
});

//进入主执行栈
console.log('end')

解释完毕后，步骤4.设置当前运行任务为 null、5.将刚才选择的任务从任务队列中移除。

此时的事件循环如下(这里的微任务列表的 promise 可以理解为执行一次微任务解一层异步...)：

image.png

接着步骤 6.执行一个微任务(Microtasks)检查点 >>> 去往微任务检查点步骤：
步骤1 - 5 ：设置检查点的值、处理微任务队列、选择最旧的微任务、运行：
先解释队列中最旧的任务 > console.log('promise1')，然后执行下一个微任务

// 向微任务队列添加新内容
.then(function() {
  console.log('promise2');
})

然后再执行下一个微任务 > console.log('promise2');

此时微任务队列已空，令微任务检查点的值为 false，回到事件循环步骤7.更新渲染的内容(如果执行的js代码中有渲染内容的变更)，返回第一步，选出任务队列中最旧的任务，也就是
console.log('setTimeout')，依次往下，直至任务队列和微任务队列均为空，本次事件循环结束。

此时控制台的输出内容如下

// start
// end
// promise1
// promise2
// setTimeout

那么以下代码的输出内容又是怎样的顺序？可以尝试绘制一下几个过程的事件循环图... 能正确得出结果就算理解了，结果我就不码了，浏览器里跑一下就知道了...

  Promise.resolve().then(function promise1 () {
    console.log('promise1');
  })
  setTimeout(function setTimeout1 (){
    console.log('setTimeout1')
    Promise.resolve().then(function  promise2 () {
      console.log('promise2');
    })
  }, 0)

  setTimeout(function setTimeout2 (){
    console.log('setTimeout2')
  }, 0)

参考文章:
event-loops
Philip Roberts: What the heck is the event loop anyway? | JSConf EU 2014
从event loop规范探究javaScript异步及浏览器更新渲染时机
推荐阅读：
不要混淆nodejs和浏览器中的event loop