异步背后的奥秘：事件循环
异步背后的奥秘：事件循环
复习环节
JavaScript运行时
我们都知道，JavaScript本身是一个单线程的，那JavaScript是如何处理同时发生的多个任务的呢？
-
首先JavaScript引擎运行在一个容器中，这个容器可能是浏览器或者node中；
-
JavaScript对象存储在内存中的位置，我们称之为堆
-
实际执行JavaScript上下文代码是调用栈（Call Stack）；
-
然后网页 中提供了很多的Web API提供给引擎使用，比如DOM，计时器，Fetch API等等
-
然后就是事件循环了，这个是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));
//后续代码
- 调用堆栈 Call Stack
JavaScript是单线程的，只有一个调用堆栈，用于执行上下文代码，遵循先入后出的原则
-
所以第一行代码会立即执行，变量赋予；
-
第二行浏览器就开始尝试加载图片；
-
第三行的load监听事件，会等待图片加载完成后，回调函数就会被放入回调队列中，注意，由于是load事件，这并不会阻塞上下文的代码执行；
-
fetch异步操作，它是一个网络请求，也会立即执行，返回一个promise，这个网络请求的处理会交给浏览器Web APIs
- Web APIs
它是浏览器提供的功能，它允许JavaScript执行异步的操作，不会阻塞主线程，所有操作是由浏览器在后台处理
- 比如这里的图片加载喝fetch请求
- 微任务队列 Microtask Queue
它主要是存放Promise的回调函数，它的优先级高于回调队列，事件循环会优先处理它的任务；
- fetch的回调函数，当网络请求完成之后，then中的回调函数就会被访问微任务队列优先处理
- 回调队列
它就是存放异步操作的回调函数了，比如DOM事件，定时器等等；
- 比如上述代码中的图片加载，当加载完成后，load事件就会被放入回调队列
- 事件循环
它是JavaScript异步操作的核心，它会一直检查调用堆栈喝任务列表，主要是一下的步骤：
-
当调用堆栈为空，就会调出任务队列取出任务并且执行
-
如果微任务队列为空，就会处理回调队列的任务；
-
所以在上述的代码中，fetch完成后会将回调函数放入微任务队列中，事件循环处理完微任务后，执行console.log(res);当图片加载完成后，load事件回调函数被放入回调队列中，微任务队列完成后，执行el.classList.add('fedeIn；
总结：
-
经过上述的讲解，就能明白JavaScript这种多线程的模型，可以实现异步代码不阻塞主线程的执行；
-
在我们编程中，一切外部资源的等待，完全交给浏览器和运行时的环境，这样可以有效的节省CPU和内存的资源；
-
利用这种异步操作，也使得JavaScript对于用户交互更加的灵活，也可以更快的响应用户的操作；
-
事件循环和任务队列也可以不创建多个线程的情况下，处理大量的并发请求；