Event Loop 也叫做“事件循环”，它其实与 JavaScript 的运行机制有关。
JS初始设计
JavaScript 在设计之初便是单线程，程序运行时，只有一个线程存在，在特定的时候只能有特定的代码被执行。这和 JavaScript 的用途有关，它是一门浏览器脚本语言，通常是用来操作 DOM 的，如果是多线程，一个线程进行了删除 DOM 操作，另一个添加 DOM，此时该如何处理？所以 JavaScript 在设计之初便是单线程的。
虽然 HTML5 增加了 Web Work 可用来另开一个线程，但是该线程仍受主线程的控制，所以 JavaScript 的本质依然是单线程
线程和进程
进程和线程是操作系统中的概念，在操作系统中，一个任务就是一个进程，比如你在电脑上打开了一个浏览器来观看视频，便是打开了一个浏览器进程，此时又想记录视频中的重要信息，于是你打开了备忘录，这便是一个备忘录进程，系统会为每个进程分配它所需要的地址空间，数据，代码等系统资源。如果把一个进程看做一个小的车间，车间里有很多工人，有的负责操作机器，有的负责搬运材料，每个工人可以看做一个线程，线程可以共享进程的资源。可以说，线程是进程的最小单位，一个进程可以包含多个线程。
执行栈和任务队列
单线程的 JavaScript 一段一段地执行，前面的执行完了，再执行后面的，试想一个，如果前一个任务需要执行很久，比如接口请求、I/O 操作，此时后面的任务只能干巴巴地等待么？干等不仅浪费了资源，而且页面的交互程度也很差。JavaScript 意识到了这个问题，他们将任务分成了同步任务和异步任务，对于二者有不同的处理。
JavaScript 在运行时会将变量存放在堆（heap）和栈（stack）中，堆中通常存放着一些对象，而变量及对象的指针则存放在栈中。JavaScript 在执行时，同步任务会排好队，在主线程上按照顺序执行，前面的执行完了再执行后面的，排队的地方叫执行栈（execution context stack）。JavaScript 对异步任务不会停下来等待，而是将其挂起，继续执行执行栈中的同步任务，当异步任务有返回结果时，异步任务会加入与执行栈不一样的队列，即任务队列（task queue），所以任务队列中存放的是异步任务执行完成后的结果，通常是回调函数。
当执行栈的同步任务已经执行完成，此时主线程闲下来，它便会去查看任务队列是否有任务，如果有，主线程会将最先进入任务队列的任务加入到执行栈中执行，执行栈中的任务执行完了之后，主线程便又去任务队列中查看是否有任务可执行。主线程去任务队列读取任务到执行栈中去执行，这个过程是循环往复的，这便是 Event Loop，事件循环。
网上有张流传甚广的图对这一过程进行了总结，在图中我们可以看到，JavaScript 在运行时产生了堆和栈，ajax、setTimeout 等异步任务被挂起，异步任务的返回结果加入任务队列，主线程会循环往复地读取任务队列中的任务，加入执行栈中执行。
（JavaScript 运行机制，图片来源于网络）
宏任务与微任务
异步任务有更深一层的划分，它们是宏任务（macro task）和微任务（micro task），二者的执行顺序也有差别。在上面我们讲到异步任务的结果会进入任务队列中，对于不同的事件类型，宏任务会加入宏任务队列，微任务会加入微任务队列。在执行栈中的同步任务执行完成后，主线程会先查看任务队列中的微任务，如果有没有，则去宏任务队列中取出最前面的一个事件加入执行栈中执行；如果有，则将所有在微任务队列中的事件依次加入执行栈中执行，直到所有事件执行完成后，再去宏任务中取出最前面的一个事件加入执行栈，如此循环往复。
由此我们可以得出结论，主线程总是会先查看微任务队列，等到微任务队列中的事件都处理完成后，再去宏任务队列中添加一个事件到任务栈中执行。
常见的宏任务有 setTimeout，setInterval；常见的微任务有 new Promise。
代码例子体验
console.log(1)
setTimeout(function() {
console.log(2)
new Promise(function(resolve) {
console.log(3)
resolve(4)
}).then(function(num) {
console.log(num)
})
}, 300)
new Promise(function(resolve) {
console.log(5)
resolve(6)
}).then(function(num) {
console.log(num)
})
setTimeout(function() {
console.log(7)
}, 400)
我们一步步来分析上面的执行顺序，当程序开始执行时，首先打印出 1，然后遇到了 setTimeout，主程序将它挂起，300 毫秒后它的回调函数进入宏任务队列，我们记做 setTimeout1。随后遇到了 new Promise，resolve 部分是同步执行的，所以会打印出 5，then 中的回调函数进入微任务队列，我们暂时记做 promise1。最后是 setTimeout，同理在 400 毫秒后加入了宏任务队列，我们记做 setTimeout2。
此时任务队列的情况如下：
|
宏任务 |
微任务 |
|
setTimeout1 |
promise1 |
|
setTimeout2 |
执行栈中的同步任务执行完成后，主线程查看任务队列时发现存在微任务，于是把 promise1 执行了，打印出 6。此时微任务队列已经空了，于是开始查看宏任务队列，将 setTimeout1 的回调函数加入任务栈开始执行，于是首先打印出 2，之后是 3，再将 then 中的回调函数加入微任务队列，我们记做 promise2。
此时任务队列的情况如下：
|
宏任务 |
微任务 |
|
setTimeout2 |
promise2 |
此时执行栈也空了，于是将微任务 promise2 加入执行栈，打印出 4。此时微任务已经执行完，再查看宏任务队列，于是执行 setTimeout2，打印出 7。
所以代码中的输出顺序是 1，5，6，2，3，4，7。
注意，主线程对微任务的读取是逐个读取，直到微任务队列为空，再读取宏队列，对宏任务队列的读取在一个循环中只读取一个。
小结
我们了解了 JavaScript 的运行机制，它是单线程的。JavaScript 中的任务可分为同步任务和异步任务，同步任务总是先进入执行栈中执行，异步任务会被挂起，直到有结果返回时，异步任务会进入任务队列中等待主线程读取执行。当执行栈为空时，主线程便会循环往复地读取任务队列中的事件，进入执行栈执行，这个过程叫 Event Loop。主线程对任务队列的读取也有先后之分，首先会去查找微任务，微任务队列的事件都执行完毕后，再读取最前面的宏任务进行执行，执行完再读取微任务队列，这个过程也是循环往复的。