从宏观角度解析 JS 运行机制——事件循环（Event Loop）

2023-09-08 04:22:50

引子：JavaScript 的执行环境

要理解 JavaScript 事件循环，我们首先需要了解 JavaScript 的执行环境。JavaScript 是在浏览器环境中运行的脚本语言，浏览器为 JavaScript 提供了一个执行环境，称为 JavaScript 引擎。JavaScript 引擎负责解析和执行 JavaScript 代码。

JavaScript 引擎的核心组件包括：

执行栈（Execution Stack）： 执行栈是一个后进先出（LIFO）的数据结构，用于存储正在执行的函数调用。当一个函数被调用时，它会被压入执行栈。当函数执行完毕，它会被弹出执行栈。
任务队列（Task Queue）： 任务队列是一个先进先出（FIFO）的数据结构，用于存储即将执行的任务。当一个任务被添加到任务队列中，它会在队列中等待被执行。当执行栈中的函数执行完毕后，任务队列中的下一个任务就会被弹出并压入执行栈，开始执行。
消息队列（Message Queue）： 消息队列是一个先进先出（FIFO）的数据结构，用于存储来自其他线程或窗口的消息。当一个消息被添加到消息队列中，它会在队列中等待被处理。当执行栈中的函数执行完毕后，消息队列中的下一个消息就会被弹出并被处理。

事件循环的宏观运作流程

JavaScript 事件循环是一个不断循环的过程，其工作流程如下：

执行栈中的函数执行完毕后，执行栈会弹出最上面的函数。
任务队列中的下一个任务会被弹出并压入执行栈，开始执行。
如果消息队列中存在消息，则消息队列中的下一个消息会被弹出并被处理。
步骤 1-3 会不断重复，直到执行栈和消息队列都为空。

事件循环的重要组成部分

JavaScript 事件循环中包含几个重要的组成部分，它们共同协作以确保 JavaScript 代码的执行和用户交互的响应性。

执行栈（Execution Stack）： 执行栈是一个后进先出（LIFO）的数据结构，用于存储正在执行的函数调用。当一个函数被调用时，它会被压入执行栈。当函数执行完毕，它会被弹出执行栈。执行栈始终只包含一个函数调用，这意味着 JavaScript 是单线程的，一次只能执行一个任务。
任务队列（Task Queue）： 任务队列是一个先进先出（FIFO）的数据结构，用于存储即将执行的任务。当一个任务被添加到任务队列中，它会在队列中等待被执行。当执行栈中的函数执行完毕后，任务队列中的下一个任务就会被弹出并压入执行栈，开始执行。任务队列主要用于存储需要异步执行的任务，例如网络请求、定时器回调和用户交互回调等。
消息队列（Message Queue）： 消息队列是一个先进先出（FIFO）的数据结构，用于存储来自其他线程或窗口的消息。当一个消息被添加到消息队列中，它会在队列中等待被处理。当执行栈中的函数执行完毕后，消息队列中的下一个消息就会被弹出并被处理。消息队列主要用于存储来自其他线程或窗口的消息，例如来自 Web Worker 的消息、来自其他窗口的消息等。

事件循环在 Web 开发中的作用

事件循环在 Web 开发中起着至关重要的作用。它确保了 JavaScript 代码的执行和用户交互的响应性。通过合理利用事件循环，我们可以优化 Web 应用的性能，提高用户体验。

提高代码执行效率： 事件循环可以提高代码执行效率，因为它允许JavaScript代码并行执行。当一个任务被添加到任务队列中，它会在队列中等待被执行。当执行栈中的函数执行完毕后，任务队列中的下一个任务就会被弹出并压入执行栈，开始执行。这种并行执行的方式可以提高代码执行效率，缩短页面加载时间，改善用户体验。
处理用户交互： 事件循环可以处理用户交互，例如点击事件、鼠标移动事件、键盘事件等。当用户触发一个事件时，事件循环会将该事件添加到任务队列中。当执行栈中的函数执行完毕后，任务队列中的下一个任务就会被弹出并压入执行栈，开始执行。这种机制确保了用户交互的响应性，使 Web 应用能够及时响应用户的操作。
执行异步操作： 事件循环可以执行异步操作，例如网络请求、定时器回调和用户交互回调等。当一个异步操作被触发时，它会被添加到任务队列中。当执行栈中的函数执行完毕后，任务队列中的下一个任务就会被弹出并压入执行栈，开始执行。这种机制确保了异步操作能够在主线程中执行，而不会阻塞主线程的运行。