JS执行过程揭秘：单线程与事件循环如何运作

前端

2023-10-05 22:38:36

揭开JS执行过程的神秘面纱

在揭晓JavaScript执行过程的答案之前，让我们先厘清几个基本概念。

1. 队列：
队列是一种先进先出（FIFO）的数据结构，就像排队等候一样，先加入队列的元素会先被处理。

2. 单线程：
JavaScript是单线程的，这意味着它一次只能执行一个任务。当一个任务正在执行时，其他任务必须等待，直到当前任务执行完毕才能继续执行。

3. 事件循环：
事件循环是一个不断运行的循环，它不断检查是否有新的事件发生，如果有，则将事件添加到队列中。当队列中没有事件时，事件循环会休眠，直到下一个事件发生。

JavaScript的执行过程

JavaScript的执行过程可以分为以下几个步骤：

1. 代码解析：
首先，JavaScript代码会被解析成抽象语法树（AST）。AST是一种数据结构，它表示了代码的结构和含义。

2. 字节码生成：
AST会被编译成字节码。字节码是一种机器可以理解的指令集。

3. 执行字节码：
字节码会被解释器或JIT编译器执行。解释器逐行执行字节码，而JIT编译器会将字节码编译成机器码，然后执行机器码。

4. 事件触发：
当某个事件发生时，例如用户点击按钮、鼠标移动等，浏览器会将事件添加到事件队列中。

5. 任务执行：
事件循环会不断检查事件队列，如果有新的事件，则会将事件从队列中取出，并执行与该事件相关联的事件处理程序。

6. 回调函数：
事件处理程序通常会调用一个回调函数。回调函数是一个在其他函数执行完成后执行的函数。

7. 异步编程：
JavaScript支持异步编程，这意味着一个任务可以在另一个任务完成之前执行。例如，当用户点击按钮时，浏览器会将一个点击事件添加到事件队列中。此时，浏览器不会等待点击事件处理程序执行完毕，而是继续执行其他任务。当点击事件处理程序执行完毕后，浏览器会执行与该事件相关联的回调函数。