JavaScript 在浏览器和 Node.js 里的运行流程

浏览器中的 JavaScript 运行流程

1. 加载与解析 HTML：浏览器首先加载 HTML 文档，并开始解析构建 DOM 树。这一步骤包括下载并解析所有的 HTML 标记。

2. 发现 JavaScript 资源：当浏览器遇到 标签时，解析过程会暂停并开始加载和执行 JavaScript 文件。如果是外部脚本（通过 src 属性链接），则需等待下载完成后再执行；如果是内联脚本，则立即执行。

3. 编译与执行：

   • 编译阶段：JavaScript 引擎（Chrome 使用 V8）首先对脚本进行词法分析和语法分析，将源代码转换成抽象语法树（AST），然后生成字节码或机器码。这一阶段还包括变量和函数的声明提升。
   • 执行阶段：接下来，引擎开始执行代码，处理变量赋值、函数调用和 DOM 操作等任务。遇到异步操作（如事件监听、Ajax 请求）时，会注册回调函数并继续执行后续代码，不阻塞主线程。
   • 事件循环与回调执行：事件循环是 JavaScript 的核心机制。当异步操作完成（如用户点击或网络响应到达）时，事件被推入事件队列。主线程空闲时，事件循环会从队列中取出事件并执行对应的回调函数。

Node.js 中的 JavaScript 运行流程

1. 启动与加载：启动 Node.js 进程时，首先加载环境和模块（如 require 的模块系统），以及用户的主脚本。

2. 编译与执行：

   • V8 引擎编译：Node.js 使用 V8 引擎对 JavaScript 代码进行编译，经历词法分析、语法分析，生成字节码，必要时优化为更高效的机器码。
   • 模块执行：Node.js 按照模块系统的规则，依次执行每个模块的代码。模块中的顶级代码（非函数内的代码）在模块首次加载时执行一次。
   • 事件循环与异步 I/O 处理：Node.js 的核心是其事件循环机制，利用 libuv 库不断检查是否有待处理的事件或回调函数，处理文件 I/O、网络请求等异步操作。当发起异步操作（如文件读写、网络请求）时，Node.js 将操作委托给操作系统处理，然后继续执行其他任务。操作系统完成操作后，通过事件通知 Node.js，相应的回调函数被加入事件队列等待执行。

3. 退出：当所有回调函数执行完毕，没有更多事件等待处理，且没有其他 JavaScript 代码正在执行时，Node.js 进程结束。