JavaScript 的工作原理：Web API、回调队列和事件循环

大家好👋，希望你们一切都好。

因此，在上一篇文章中，我们了解了Google 的 V8 引擎、堆内存和调用堆栈。

JavaScript 的工作原理：JavaScript 引擎、堆和调用栈概述

Bipin Rajbhar ・ 2020年4月29日

#javascript #beginners #webdev #tutorial

在本文中，我们将了解Web API、回调队列和事件循环。

🌐 Web API

Web API 由 Web 浏览器提供，为 V8 引擎提供附加功能。

Web API 调用从调用堆栈添加到 Web API 容器。这些 Web API 调用将保留在 Web API 容器内，直到触发操作。该操作可以是点击事件、HTTP 请求，也可以是计时器完成其设定的时间。触发操作后，回调函数将被添加到回调队列中。

🧑‍🤝‍🧑 回调队列

回调队列是一种FIFO数据结构。

回调队列按照添加的顺序存储所有回调函数。

♻️ 事件循环

当您的函数调用在调用堆栈中需要花费大量时间执行时会发生什么？

例如

• 执行从 1 到 10B 的 for 循环
• 发出网络请求
• 进行图像处理

让我们举个例子。

同步代码可视化

你可能会问这为什么是个问题？问题在于，当调用栈有一个函数要执行时，浏览器因为被阻塞而无法执行任何其他操作。

解决方案是异步回调、承诺和异步/等待。

让我们举个例子。

异步代码可视化

事件循环只有一个简单的工作要做。它查看调用栈和回调队列，如果调用栈为空，就将回调队列的第一个回调函数推送到调用栈。

我希望现在你已经很好地理解了 JavaScript 的工作原理。

在下一篇文章中，我们将学习 V8 如何编译我们的 JavaScript 代码。

📚 资源

事件循环到底是什么？| Philip Roberts | JSConf EU

感谢阅读！我叫 Bipin Rajbhar；我喜欢帮助人们学习新技能😊。如果您想收到新文章和资源的通知，可以在Twitter上关注我。