精学JS：浏览器中的 EventLoop

无论是浏览器端还是服务端，都在使用 Eventloop，虽然两者机制不同，但都利用了 JavaScript语言的单线程和非阻塞的特点。

  先讲解浏览器端的 Eventloop的运行机制，对浏览器端有了一定的理解之后，再设计一些 Node.js的 Eventloop的底层逻辑。

浏览器的 Eventloop

  Eventloop 是 JavaScript引擎异步编程背后需要特别关注的知识点。JS在单线程上执行所有操作，虽然是单线程，但是能够高效地解决问题，并能给我们带来一种“多线程”的错觉，这其实是通过使用一些比较合理的数据结构来达到此效果的。来看下 JavaScript引擎背后都有哪些东西在同时运转。

1.调用堆栈（call stack）负责跟踪所有要执行的代码。

  每当一个函数执行完成时，就会从堆栈中弹出（pop）该执行完成函数；如果有代码需要进去执行的话，就进行 push操作，如下图所示：

2.事件队列（event queue）负责将新的 function 发送到队列中进行处理

  遵循 queue的数据结构特性，先进先出，在该顺序下发送所有操作以进行执行。如下图所示：

3.每当调用事件队列（event queue）中的异步函数时，都会将其发送到浏览器 API

根据从调用堆栈收到的命令，API开始自己的单线程操作。其中 setTimeout方法就是一个比较典型的例子，在堆栈中处理 setTimeout操作时，会将其发送到相应的 API，该 API一直等到指定的时间将此操作送回进行处理。它将操作发送到哪里去呢？答案是事件队列（event queue）。这样，就有了一个循环系统，用于在 JavaScript中运行异步操作。

4.JavaScript 语言本身是单线程的，而浏览器 API 充当单独的线程

  事件循环（Eventloop）促进了这一过程，它会不断检查调用堆栈是否为空。如果为空，则从事件队列中添加新的函数进入调用栈（call stack）；如果不为空，则处理当前函数的调用。我们把整个过程串起来就是这样的一个循环执行流程，如下图所示：

 通过上面这张图就能很清晰地看出调用栈、事件队列以及 Eventloop和它们之间相互配合的关系。

  那么看完了 JS引擎的全局流程图，我们再看看 Eventloop的内部都有哪些东西呢？简单来说 Eventloop通过内部两个队列来实现 Event Queue 放进来的异步任务。以 setTimeout为代表的任务被称为宏任务，放到宏任务队列（macrotask queue）中；而以 Promise为代表的任务被称为微任务，放到微任务队列（microtask queue）中。我们来看一下日常工作中经常遇到的哪些是宏任务，哪些是微任务，如下所示。

macrotasks(宏任务):

script(整体代码),setTimeout,setInterval,setImmediate,I/O,UI rendering,event listner

microtasks(微任务):

process.nextTick, Promises, Object.observe, MutationObserver

我把主要的宏任务和微任务都列了出来，其实 Eventloop在处理宏任务和微任务的逻辑其实还是有些不一样的，执行的情况大致如下：

1. JavaScript引擎首先从宏任务队列（macrotask queue）中取出第一个任务;
2. 执行完毕后，再将微任务（microtask queue）中的所有任务取出，按照顺序分别全部执行（这里包括不仅指开始执行时队列里的微任务），如果在这一步过程中产生新的微任务，也需要执行；
3. 然后再从宏任务队列中取下一个，执行完毕后，再次将 microtask queue 中的全部取出，循环往复，直到两个 queue中的任务都取完。

总结起来就是：一次 Eventloop循环会处理一个宏任务和所有这次循环中产生的微任务。