深入解析 JavaScript 执行顺序与预编译机制

JavaScript 执行顺序概述

尽管现代浏览器支持并行下载部分 JavaScript 资源，但基于脚本间的依赖关系，其实际执行顺序仍严格遵循引入的先后次序。

本文旨在梳理学习 JavaScript 过程中关于执行顺序的理解，通过整理记录以加深记忆，便于后续复习与参考。

HTML 文档中的执行顺序

HTML 文档中的执行顺序分析

JavaScript 的执行顺序直观上看似简单，实则较为复杂。当 JavaScript 代码嵌入 HTML 中时，浏览器解析 HTML 文档流是自上而下逐步构建页面结构和信息的。由于 JavaScript 代码作为嵌入脚本被视为 HTML 文档的一部分，其装载与执行顺序由 <script> 标签在文档中出现的位置决定。具体示例如下：

<!DOCTYPE html>
<script>
  console.log("顶部脚本");
</script>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script>
    console.log("头部脚本");
  </script>
</head>
<body>
  <script>
    console.log("页面脚本");
  </script>
</body>
</html>
<script>
  console.log("底部脚本");
</script>

对于通过 <script> 标签的 src 属性引入的外部 JavaScript 文件，同样遵循语句出现的顺序执行。其执行过程属于文档装载的一部分，并不会因为文件位于外部而延迟执行。

// 先加载 b.js 并且执行里面的代码
<script src="b.js"></script>
// 然后在按顺序执行下面的代码
<script>
  console.log(1);
</script>

预编译与变量提升

预编译阶段

当 JavaScript 引擎开始解析代码时，会进入预编译阶段，对所有声明的变量和函数进行初步处理。

变量提升现象

console.log(a); // undefined
var a = 1;
console.log(a); // 1

预解析函数声明

f(); // 1
function f() {
  console.log(1);
};

详细机制参考：JavaScript 变量声明提升 (hoisting)。

分块执行代码机制

分块执行代码机制

JavaScript 是按代码块执行代码的，所谓代码块是指被 <script> 标签分隔开的代码段。具体示例如下：

<script>
  // 代码段1
  var a = 1;
</script>
<script>
  // 代码段2
  function f() {
    console.log(1);
  };
</script>

由于 JavaScript 按代码块执行，浏览器在解析 HTML 文档流时，一旦遇到 <script> 标签，JavaScript 引擎会等待该代码块完全加载，随后对代码进行预编译，最后执行。执行完毕后，浏览器继续解析剩余的 HTML 文档流，同时 JavaScript 引擎准备处理下一个代码块。

存在一个常见陷阱：由于 JavaScript 按块执行，若在一个代码块中调用后续代码块声明的变量或函数，将导致语法错误。然而，不同代码块均属于全局作用域，因此块之间的变量和函数是可以共享的。具体示例如下：

<script>
  // 代码段1
  console.log(a);
  f();
</script>
<script>
  // 代码段2
  var a = 1;
  function f() {
    console.log(1);
  };
</script>

由于 JavaScript 按块处理代码且遵循 HTML 文档流的解析顺序，上述示例中会出现语法错误。但在整个文档流加载完毕后再次访问这些变量或函数，则不会出现此类错误。具体示例如下：

<script>
  window.onload = function(){ // 页面初始化事件处理函数
    // 代码段1
    console.log(a);
    f();
  }
</script>
<script>
  // 代码段2
  var a = 1;
  function f() {
    console.log(1);
  };
</script>

出于安全考虑，通常建议在页面初始化完成后再执行 JavaScript 代码，这样可以避免网络速度对脚本执行的潜在影响，同时也规避了 HTML 文档流对 JavaScript 执行的限制。

JavaScript 执行步骤总结

综上所述，JavaScript 在执行时的具体步骤如下：

1、首先读入第一段代码块。

2、对该代码块进行语法分析，若出现语法错误，则直接执行第 5 步。

3、对 var 声明的变量和 function 定义的函数进行“预编译处理”（注意：赋值式函数不会进行预编译处理）。

4、执行代码块，若执行过程中出错则报错。

5、如果存在下一段代码块，则读入下一段代码块，并重复步骤 2。

6、执行结束。