前端技能树，面试复习第 10 天 — 用动画的方式理解事件循环机制

1. 事件循环机制

事件循环是每个 JavaScript 开发人员都必须理解的知识点之一，但起初理解起来可能有点困难。 这篇开始，我会尝试通过低分辨率 gif 动画的方式解释它，进而来帮助你理解。

首先，什么是事件循环，为什么要关心？

JavaScript 是单线程的：一次只能运行一个任务。 通常这没什么大不了的，但是现在假设正在运行一个需要 30 秒的任务。 在该任务期间，我们等待 30 秒，然后才能发生其他事情（JavaScript 默认在浏览器的主线程上运行， 所以整个 UI 都卡住了）😬 。如果这样的话，我想没有人想要一个缓慢、无响应的网站。

幸运的是，浏览器为我们提供了一些 JavaScript 引擎本身不提供的功能：Web API。 这包括 DOM API、setTimeout、HTTP 请求等。 这可以帮助我们创建一些异步的、非阻塞的行为🚀。

当我们调用一个函数时，它会被添加到调用堆栈中。 调用堆栈是 JS 引擎的一部分。 它是一个堆栈，这意味着它是先进后出的。 当一个函数返回一个值时，它会从堆栈中弹出: