异步背后的奥秘：事件循环

复习环节

JavaScript运行时

我们都知道，JavaScript本身是一个单线程的，那JavaScript是如何处理同时发生的多个任务的呢？

1. 首先JavaScript引擎运行在一个容器中，这个容器可能是浏览器或者node中；

2. JavaScript对象存储在内存中的位置，我们称之为堆

3. 实际执行JavaScript上下文代码是调用栈（Call Stack）；

4. 然后网页 中提供了很多的Web API提供给引擎使用，比如DOM，计时器，Fetch API等等

5. 然后就是事件循环了，这个是JavaScript运行事的关键部分，他负责处理异步操作和任务队列；有事件循环了，JavaScript就可以在主线程中运行非阻塞式的操作了；事件循环实现一般就是通过回调队列，来自事件需要准备执行的函数，例如点击事件、计时器、一些数据等等；

异步JavaScript如何在幕后工作

• 先看一段代码片段

el = document.querySelector('img');
el.src = 'dog.jpg';
el.addEventListener('load', () => {el.classList.add('fedeIn');
});fetch('https://xxxxxxx/api').then(res => console.log(res));//后续代码

1. 调用堆栈 Call Stack

JavaScript是单线程的，只有一个调用堆栈，用于执行上下文代码，遵循先入后出的原则

• 所以第一行代码会立即执行，变量赋予；

• 第二行浏览器就开始尝试加载图片；

• 第三行的load监听事件，会等待图片加载完成后，回调函数就会被放入回调队列中，注意，由于是load事件，这并不会阻塞上下文的代码执行；

• fetch异步操作，它是一个网络请求，也会立即执行，返回一个promise，这个网络请求的处理会交给浏览器Web APIs

2. Web APIs

它是浏览器提供的功能，它允许JavaScript执行异步的操作，不会阻塞主线程，所有操作是由浏览器在后台处理

• 比如这里的图片加载喝fetch请求

3. 微任务队列 Microtask Queue

它主要是存放Promise的回调函数，它的优先级高于回调队列，事件循环会优先处理它的任务；

• fetch的回调函数，当网络请求完成之后，then中的回调函数就会被访问微任务队列优先处理

4. 回调队列

它就是存放异步操作的回调函数了，比如DOM事件，定时器等等；

• 比如上述代码中的图片加载，当加载完成后，load事件就会被放入回调队列

5. 事件循环

它是JavaScript异步操作的核心，它会一直检查调用堆栈喝任务列表，主要是一下的步骤：

• 当调用堆栈为空，就会调出任务队列取出任务并且执行

• 如果微任务队列为空，就会处理回调队列的任务；

• 所以在上述的代码中，fetch完成后会将回调函数放入微任务队列中，事件循环处理完微任务后，执行console.log(res);当图片加载完成后，load事件回调函数被放入回调队列中，微任务队列完成后，执行el.classList.add('fedeIn；

总结：

• 经过上述的讲解，就能明白JavaScript这种多线程的模型，可以实现异步代码不阻塞主线程的执行；

• 在我们编程中，一切外部资源的等待，完全交给浏览器和运行时的环境，这样可以有效的节省CPU和内存的资源；

• 利用这种异步操作，也使得JavaScript对于用户交互更加的灵活，也可以更快的响应用户的操作；

• 事件循环和任务队列也可以不创建多个线程的情况下，处理大量的并发请求；