持续创作，加快成长！这是我参加「日新方案 10 月更文应战」的第12天，点击查看活动概况

前言

JavaScript作为一门单线程的言语，但却具有高效的性能与优异的异步处理方案。这是由于JS引进了事情循环机制（Event Loop）。事情循环是一个十分底层的概念，但它极其重要——把握它能让你了解浏览器页面到底是怎么运转的，从而写出高性能的代码。它也是前端面试常考的题目，了解它对前端工程师是一堂必修课。基于此我决议写下这篇文章来体系地梳理相关常识。本篇旨在用最小的学习成本快速了解事情循环机制，因而比较通俗易懂，适合新手进阶的入门，欢迎咱们来一同讨论呀~

首先咱们要先了解烘托进程，即浏览器内核，它是事情循环的基础。

浏览器的多进程架构与烘托线程

为了提升浏览器的稳定性、流畅性和安全性，现代浏览器的架构为多进程架构，它由浏览器主进程、GPU 进程、网络进程、多个烘托进程和多个插件进程组成。

从JS的单线程特性说起，带你超快了解JavaScript中的事情循环机制（Event Loop）

其间烘托进程的中心使命是解析 HTML、CSS 和 JavaScript ，制作页面、履行JS脚本，处理事情等，从而展现出用户能够与之交互的网页。浏览器中的每个 Tab 都是一个烘托进程。每个烘托进程内部都具有一个主线程，主线程使命繁杂，包括处理 DOM，核算样式、布局，解析履行JavaScript脚本，处理各种输入事情，控制事情循环等。

如此多不同类型的使命在主线程中履行，为了避免使命之间打架和阻塞，自然需要树立一个机制来统筹调度，这个统筹调度机制便是这篇文章的中心——事情循环机制。为了更有逻辑的讲解事情循环机制，接下来我结合场景一步步说明。

为什么JS作为单线程言语还具有异步操作能力

众所周知大多数编程言语都是多线程，如Java，C++。那咱们思考一个问题，为什么JS是门单线程言语？这首要是由于JS的设计初衷便是发明一门支撑表单脚本的轻量化的浏览器脚本言语，而JS具有操作DOM的功能，假如JS是多线程言语，那么当它们一起对页面同一个元素进行操作的话势必要树立一套杂乱的优先级体系来区别终究谁更有资历操作DOM。因而在早期对 JavaScript 定位自身便是一门简单的浏览器脚本言语的情况下单线程无疑是最简单且有用的处理方案。

注：尽管在后面的 JavaScript 言语规范中引进了 Worker 作业线程但是其首要是做一些CPU密集型核算使命，对于DOM的操作依然是经过线程间通讯交给主线程来做，因而 JavaScript 单线程言语的本质并没有改变。

那么JS作为一门单线程言语是怎么履行异步操作的呢？比如 setTimeout 和 setInterval 的完成原理是什么？要回答这些问题就需要引进 JavaScript 事情履行机制的中心——使命行列。

使命行列

使命行列是一种数据结构，能够存放要履行的使命。下面咱们结合代码来了解这个概念。

function single() {
     num1 = 1+1; //使命1  
     num2 = 1+2; //使命2
     num3 = 1+3; //使命3  
     console.log(num1,num2,num3);
}
single()；

在上面的履行代码中，使命代码是依照次序写进主线程里，依照次序在线程中依次被履行；等所有使命履行完成之后，线程就主动退出。如图所示：

从JS的单线程特性说起，带你超快了解JavaScript中的事情循环机制（Event Loop）

那假如有突发事情需要紧急处理呢？假如有其他线程发来的音讯需要接收呢？

咱们就需要引进事情循环机制。使命行列符合行列的特色（但它不是行列，而是一种集合，由于事情循环处理模型从所选行列中获取第一个可运转使命，而不是使第一个使命出队)：先进先出。咱们添加一个使命行列，咱们之前写的使命代码会依照次序添加进使命行列中，与此一起IO线程把经过IPC接收到的其他进程传进来的音讯组装成新使命添加进使命行列尾部，例如鼠标点击事情、网络请求等。

事情循环机制则被引进进烘托主线程中，它会循环地从使命行列头部中读取使命，依次履行使命。如图所示：

从JS的单线程特性说起，带你超快了解JavaScript中的事情循环机制（Event Loop）

你或许发现了，假如现在有个十分紧急的使命，但咱们依照这个模型也只能把它加入到使命行列尾部等候履行。这样子会影响到使命的实时性。因而咱们发明了微使命。它有用的弥补了实时性的缺陷。

微使命与宏使命

有微使命，相对的就会有宏使命。

宏使命

宏使命的界说

宏使命即是使命行列中的使命。也能够界说为由宿主环境（如浏览器及浏览器）建议的使命。如前图所示，这些使命首要包括烘托事情、用户交互事情（如鼠标点击等）、JavaScript 脚本履行事情、资源加载完成事情。每个宏使命中都包括一个微使命行列。

宏使命的履行流程

主线程中其实是存在多个使命行列的。浏览器会将oldestTask（接下来会说明他的界说）和taskStartTime为空。

然后从多个使命行列中选出oldestTask，即一个最早写入使命行列的使命。（由于微使命行列不是使命行列，所以这一步选出的oldestTask必然是宏使命）。

然后将taskStartTime设置为不安全的同享当时时刻。循环体系记录使命开始履行的时刻。

将当时正在履行的使命设置为oldestTask。

当使命履行完成之后，删去当时正在履行的使命，并从对应的音讯行列中删去掉这个 oldestTask。

然后查看有没有微使命，履行微使命。

宏使命的不足之处

直接甩，

const startTime = Date.now()
setTimeout(() => {
  console.log(Date.now() - startTime) 
}, 1000)
let i = 0
while (i < 100000000) {
 i+=1
}

从JS的单线程特性说起，带你超快了解JavaScript中的事情循环机制（Event Loop）

咱们能够看到这儿打印结果并不是咱们预期中的 1000，由于IO线程会随时插进一些使命，所以导致JS的履行时刻无法精准控制。对于一些实时性要求高的使命，宏使命显然是不足够的。

微使命

微使命的界说

JavaScript 引擎建议的使命称为微使命，其本质是一个需要异步履行的函数，典型比如便是Promise函数所建议的回调函数。

微使命的履行流程

如之前在宏使命的履行流程中所讲，微使命履行于主函数完成之后，事情循环体系会查看有无微使命，有则履行，履行完后再完毕本轮宏使命。举个：

console.log(1)
setTimeout(() => {
  console.log(2)
  const promise1 = new Promise((resolve, reject) => {
    resolve()
  })
  promise1.then((res) => {
    console.log(3)
  })
})
const promise2 = new Promise((resolve, reject) => {
  resolve()
})
promise2.then((res) => {
  console.log(4)
})
console.log(5)

从JS的单线程特性说起，带你超快了解JavaScript中的事情循环机制（Event Loop）
履行结果如图，这是由于 setTimeout 函数作为浏览器API（归于咱们前面讲的宿主环境噢），触发的回调函数是典型的宏使命，体系看到它之后会将其加入宏使命行列，依照我刚刚讲述的宏使命履行流程，一个宏使命中主函数完结后会查看有无微使命，有则履行。所以体系看到 setTimeout 后会将其交予定时器线程来履行（也便是说它变成了下一轮宏使命），自己先持续完成接下来的JS句子。而Promise 函数它作为典型的微使命，在本轮宏使命完成后履行。

咱们能够大约了解：宏使命的行列就相当于事情循环。那么本示例中含有两轮事情循环。第一轮，体系看到setTimeout直接将其弄去第二轮履行，看到Promise后将它丢进微使命行列，自己接着履行 console.log(5)。履行后，履行微使命行列里的使命，打印出4。第一轮事情循环就此完毕，履行setTimeout函数中的内容。

宏使命与微使命的小总结

综上所述，一个JS脚本自身对于浏览器而言便是一个宏使命，也是第一个宏使命，而处于其间的代码可能有3种：非异步代码、发生微使命的异步代码（promise等）、发生宏使命的异步代码(settimeout、setinterval等)。

宏使命处于一个使命行列中，会先履行完上一个才会履行下一个宏使命，所以在JS脚本中，先履行非异步代码，再履行微使命代码，最终履行宏使命代码。然后开启下一个宏使命，持续依照这个次序履行。 咱们能够大约了解：一个宏使命履行的进程就相当于一个事情循环。

微使命是宏使命的一部分，每个宏使命中都包括一个微使命行列，在履行宏使命的进程中，假如有突发事情，那么就会将其加到微使命行列中，等候当时宏使命中的主函数履行完成后履行微使命，因而也就既处理了履行效率的问题又处理了实时性问题。

参考资料

浏览器作业原理与实践

WHATWG event-loop-processing-model