事件循环

参阅 Event Loop 浏览器端的事件循环

什么是 Event-Loop ？

Event-Loop 是一个执行模型，在 html5规范 中进行了浏览器端的 Event-Loop 的明确定义。

宏任务与微任务

javascript 有两种异步任务，分别是宏任务和微任务

宏任务

宏任务，macro task，也叫 tasks，一些异步任务的回调会依次进入 macro task queue，等待后续被调用。

这些异步任务包括：

• setTimeout
• setInterval
• setImmediate (Node独有)
• requestAnimationFrame (浏览器独有)
• I/O
• UI rendering

微任务

微任务， micro task, 也叫 jobs，另一些异步任务的回调会依次进入micro task queue，等待后续被调用。

这些异步任务包括：

• process.nextTick(Node独有)
• Promise
• Object.observe
• MutationObserver

事件循环 Event Loop

1. 执行全局 script 代码，这些代码有一些是同步语句，有一些是异步语句（如： setTimeout）；
2. 全局script同步代码执行完毕后，调用栈Stack会清空；
3. 从微任务micro task queue 中取出位于队首的任务，放入调用栈Stack中执行，执行完后micro task queue长度减一；
4. 继续取出微任务micro task queue位于队首的任务，放入调用栈Stack中执行， 以此类推，直到把micro task queue中的所有任务都执行完毕。注意，如果在执行micro task的过程中，产生了micro task那么会加入到队列的末尾，也会在这个周期被调用执行；
5. micro task中的所有无人都执行完毕，此时 micro task queue 为空队列，调用栈Stack也为空；
6. 取出宏队列 macro task queue 中位于队首的任务，放入Stack中执行；
7. 执行完毕后，调用栈Stack为空；
8. 重复第3-7个步骤；
9. 以此继续循环重复；