事件循环

事件循环（Event-loop）

定义

javascript 是一门单线程语言，但是要知道浏览器本身不是单线程的（还有其他的工作线程：处理 AJAX 请求的线程、处理 DOM 事件的线程、定时器线程、读写文件的线程(例如在 Node.js 中)等等），是指 js 引擎是单线程的，即在 JS 引擎中负责解释和执行的线程只有一个，就是所谓的主线程（js 引擎，e.g. v8 引擎）。

（详细了解==>进程&线程 //todo）

同步任务和异步任务

js 的任务分为同步和异步两种，处理方式不同。

同步任务
- 在主线程上同步执行
异步任务
- 进入事件队列，把事件注入到调用栈内等待主线程调用执行

宏任务和微任务

进一步细分，JS 又可以分成宏任务（macrotask）和微任务（microtask）。宏任务事件是放在事件队列（macrotask 队列）中的，；微任务是放在微任务队列（microtask 队列）中。在 ECMAScript 中，microtask 称为 jobs，macrotask 可称为 task。

macrotask：
- script(整体代码)、setTimeout、setInterval、requestAnimationFrame、I/O、事件、MessageChannel、setImmediate (Node.js)
microtask：
- Promise.then、 MutaionObserver、process.nextTick (Node.js)
（补充：在 node 环境下，process.nextTick 的优先级高于 Promise）

事件循环的流程

检查 macrotask 队列是否为空，非空则到 2，为空则到 3
执行 macrotask 中的一个任务
检查 microtask 队列是否为空，若有则到 4，否则到 5
取出 microtask 中的任务执行，执行完成返回到步骤 3
执行视图更新

example

console.log('start');

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

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

console.log('end');

执行顺序：

首先全局代码(Main())被压入执行栈中，执行宏任务，打印start；
遇到 setTimeout 放入宏任务队列（被推入事件队列的时机是计时器线程完成计时）；
遇到 Promise，把第一个 then 的 callback 放入微任务队列；
继续执行宏任务，打印end；
宏任务结束，调用栈当前为空，首先查找微任务队列；
执行微任务队列中的任务，打印promise1；
执行完第一个 then 后返回后（返回 undefined），promise 状态变成 fullfill，出发第二个 then 执行，同理推入微任务队列；
继续查找微任务队列，打印promise2；
此时微任务队列为空，此轮事件循环结束（如果有 ui 渲染会在这里执行）；
开始执行下一轮事件循环，首先检查宏任务队列，发现 setTimeout，执行打印setTimeout

执行结果： start end promise1 promise2 setTimeout