【Event Loop】深入浅出事件循环机制

JavaScript是单线程的

JavaScript 是浏览器的脚本语言。其主要作用是与客户端进行交互。最开始设计之初它就是单线程。因为它主要操作 DOM。如果设计成多线程，假设一个线程在操作某个 DOM 节点，一个线程又在删除这个 DOM 节点。这时候浏览器就无法判断以哪个线程为主，这种复杂的场景大大增加了语言的难度。所以 JavaScript 从一诞生就是单线程。也是它最重要的特性之一。

异步和同步概念

因为单线程的原因，后一个任务需要等待前一个任务的执行，这就可能出现长时间的等待。但由于类似ajax网络请求、setTimeout时间延迟、DOM事件的用户交互等，这些任务并不消耗 CPU，是一种空等，资源浪费，因此出现了异步。
通过将任务交给相应的异步模块去处理，主线程的效率大大提升，可以并行的去处理其他的操作。
当异步处理完成，主线程空闲时，主线程读取相应的callback，进行后续的操作，最大程度的利用CPU。此时出现了同步执行和异步执行的概念。

同步执行是主线程按照顺序，串行执行任务；异步执行就是cpu跳过等待，先处理后续的任务（CPU与网络模块、timer等并行进行任务）。由此产生了任务队列与事件循环，来协调主线程与异步模块之间的工作。

事件循环机制

如图，流程如下：

1. 主线程读取JS代码，此时为同步环境，形成相应的堆和执行栈；
2. 主线程遇到异步任务，指给对应的异步进程进行处理（WEB API）;
3. 异步进程处理完毕（Ajax返回、DOM事件处罚、Timer到等），将相应的异步任务推入任务队列；
4. 主线程执行完毕，查询任务队列，如果存在任务，则取出一个任务推入主线程处理（先进先出）；
5. 重复执行2、3、4；称为事件循环。

任务队列

任务队列存在多个，同一任务队列内，按队列顺序被主线程取走；不同任务队列之间，存在着优先级，优先级高的优先获取（用户I/O）。

宏任务和微任务

同任务队列存在两种类型，一种为宏任务（macrotask queue），另一种为微任务 （microtask queue）。
ES6 的 promise［ECMAScript标准］产生的任务队列为 微任务 microtask queue。
两者区别：
微任务 microtask queue：唯一，整个事件循环当中，仅存在一个；执行为同步，同一个事件循环中的microtask会按队列顺序，串行执行完毕；

宏任务 macrotask queue：不唯一，存在一定的优先级（用户I/O部分优先级更高）；异步执行，同一事件循环中，只执行一个。
执行顺序：
微任务 ==> DOM渲染 ===> 宏任务
常见的宏任务和微任务：
宏任务：setTimeout、setInterval，DOM事件，AJAX请求 等；
微任务：promise.then()，async/await 等;

总结

更完整的事件循环流程：

1. 主线程读取JS代码，此时为同步环境，形成相应的堆和执行栈；
2. 主线程遇到异步任务，指给对应的异步进程进行处理（WEB API）;
3. 异步进程处理完毕（Ajax返回、DOM事件处罚、Timer到等），将相应的异步任务推入任务队列；
4. 主线程查询任务队列，执行microtask queue，将其按序执行，全部执行完毕；
5. 主线程查询任务队列，执行macrotask queue，取队首任务执行，执行完毕；
6. 重复4、5。

microtask queue中的所有callback处在同一个事件循环中，而macrotask queue中的callback有自己的事件循环。
简而言之：同步环境执行 -> 事件循环1（microtask queue的All）-> 事件循环2(macrotask queue中的一个) -> 事件循环1（microtask queue的All）-> 事件循环2(macrotask queue中的一个)…