JS的事件循环机制

事件循环的意义

将耗时的任务分解为几部分来执行，这几个分解的任务所执行的时机由事件循环机制来确保。这样做是为了避免耗时操作阻塞浏览器UI界面的重绘。

事件循环与异步操作

JS的异步操作实质上是将一个任务分为几部分，以两部分为例，第二部分作为回调函数（这个函数根据API的写法来确定是异步调用还是同步调用，如果是异步调用才真正应该叫回调函数，同步的操作无所谓回调），等第一部分运行结束有了结果后，再通过调用回调函数（即第二部分）来继续运行任务。第一部分运行往往要么用时不长，要么是浏览器的其他线程执行操作（如远程请求等），回调函数在等待被调用期间，浏览器可以执行其他代码。因此，JS的异步是通过事件循环机制，将回调函数放入任务队列来进行的。

解释异步操作流程

在浏览器中，JS解释器用于执行JS代码，即JS函数调用栈。浏览器提供webAPI诸如setTimeout，Ajax等等异步操作，以及任务队列（task queue）。如下图

回调函数的写法是浏览器API提供的，那样的写法意味着回调函数会在将来被加入到任务队列里。比如一个Ajax请求$.ajax('url', foo)，调用栈开始运行时，函数foo会一直等待ajax的运行结果。一旦运行有结果，foo会被加入到任务队列task queue中。此时，event loop机制开始发挥作用。事件循环机制就是一个监视器，一直监视着调用栈是否为空。一旦为空，就会把任务队列中的函数加入到调用栈内执行。之所以叫事件循环，就是这个监视器会一遍一遍循环监测任务队列中是否有任务。有任务的时候，就准备将任务加入调用栈（只有调用栈空了才加入）。
此外，还有一个叫job queue的队列，一般称之为微任务队列，而task queue则称为宏任务队列。事件循环监测一圈时，先加入宏任务，宏任务执行完后，再加入微任务。等微任务执行完后，再继续循环。所以，循环一圈，最后加入的一定是微任务，除非没有微任务。不过关于微任务，node环境跟浏览器环境的执行不一样。

事件循环每一轮的标志

事件循环的每一轮都以调用栈清空为标志，每次清空完调用栈，就代表着一轮事件循环的结束。

事件循环与浏览器重绘

JS的调用栈不为空的时候，浏览器是没法执行重绘的，这样设置也很正常，因为JS代码可能会更改DOM结构，因此只有调用栈为空时，浏览器才会执行重绘。为了避免出现UI界面阻塞，调用栈中的函数代码不应该是耗时操作，如果有任务是耗时的，那应该将任务分割成几部分，采用异步操作来执行任务，从而得到一个漂亮顺畅的UI界面。