事件循环与任务队列

讲事件循环和任务队列，肯定就要先说一下JavaScript的单线程

因为JavaScript（最初）是运行在浏览器中的，作为一个与用户交互为主的语言，如果设计为多线程，会带来很复杂的同步问题，比如两个事件，一个给变量a*2,一个给变量a+10,如果存在多线程，执行顺序不同，结果不同，同样的情况应用于DOM操作呢，所以为了避免这种复杂性，JavaScript设计为单线程。

单线程带来的新问题就是程序中有很多操作会很耗时，比如Ajax请求，而为了这种操作不阻塞程序的运行，所以有了任务队列。用途就是浏览器发起一个Ajax请求，而从发起请求到收到响应是需要一段时间的，这时主线程会把这个任务挂起，执行接下来的任务，以保证程序不被阻塞，待到收到请求的响应，再把对应的回调方法添加到一个队列中去依次执行。简单理解这个队列就是任务队列。

接下来上图：

解释下上图：

浏览器的中的任务分为宏任务和微任务，所以任务队列也分为宏任务队列和微任务队列。

宏任务队列中根据事件源又分为如图所示任务队列（新添加一个宏任务的时候，如果宏任务队列中有该事件源的队列，则添加到该队列，否则创建该事件源的队列，把该宏任务插入队列，并把该队列插入宏任务队列），因为主线程每次会执行微任务队列中的所有微任务，所以微任务中不会根据事件源划分微任务队列，主线程中所有同步任务执行完毕后，会执行微任务队列中所有的微任务，然后执行一个宏任务队列，再次执行微任务队列中的所有微任务，再执行下一个宏任务队列，如此循环，这个过程就是事件循环（Event Loop）。

如果有错误或者不严谨的地方，请给予指正，十分感谢！

转载于:https://juejin.im/post/5c99bcf05188251cdf220235