JavaScript 全面解析各种浏览器网页中的JS 执行顺序

2023年5月27日上午7:51 • JavaScript

JavaScript 全面解析各种浏览器网页中的JS 执行顺序

前言

JavaScript 是一种动态的、弱类型的脚本语言，广泛应用于网页开发、服务器端开发等领域。在网页中，JavaScript 被用来控制页面的行为、交互和动态效果。在不同的浏览器中，JavaScript 的执行顺序会有所差异，这给开发者带来了一定的困扰。本文将详细讲解 JavaScript 在不同浏览器中的执行顺序，帮助开发者更好地理解这门语言。

1. JavaScript 的执行过程

JavaScript 代码一般通过 <script> 标签嵌入到网页中。当浏览器遇到 <script> 标签时，会立即执行其中的 JavaScript 代码。JavaScript 的执行过程一般分为以下几个阶段：

解析：浏览器会先解析 JavaScript 代码，生成抽象语法树（AST）和可执行代码。
预编译：浏览器会预编译 JavaScript 代码，给变量赋初值，处理函数声明等。
执行：浏览器会按照代码从上到下的顺序执行 JavaScript 代码，当遇到函数调用、条件语句、循环语句等结构时，会生成新的执行上下文（Execution Context）来保存执行的状态。

2. 不同浏览器中 JavaScript 的执行顺序

2.1 Chrome 浏览器

Chrome 浏览器中的 JavaScript 执行顺序和上面的三个阶段是一致的，即：解析 > 预编译 > 执行。但是，由于 Chrome 浏览器使用的是 V8 引擎，V8 引擎会进行一些优化，如 Just-in-time 编译等，使得代码执行更加高效。

2.2 IE 浏览器

IE 浏览器中的 JavaScript 执行顺序和 Chrome 浏览器类似，但是有一些差异。如：

IE 浏览器在解析 JavaScript 代码时，会先把所有的函数提取出来，生成一个函数表（Function Table），再按顺序执行代码。
对于未定义的变量，IE 浏览器会默认将其声明为全局变量。

2.3 Firefox 浏览器

Firefox 浏览器中的 JavaScript 执行顺序和 Chrome 浏览器也有差异。如：

Firefox 浏览器在解析 JavaScript 代码时，会从上到下执行代码，但是对于嵌套的函数，在函数定义时并不会执行其中的代码。
Firefox 浏览器在预编译阶段会将变量和函数声明提升到作用域的顶部。

3. 示例说明

3.1 示例一

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>示例一</title>
</head>
<body>
  <script>
    console.log(a);
    var a = 1;
    console.log(a);
  </script>
</body>
</html>

在 Chrome 和 Firefox 浏览器中，上面的代码会输出：

undefined
1

在 IE 浏览器中，上面的代码会输出：

1
1

原因是因为在 Chrome 和 Firefox 浏览器中，变量 a 被默认声明为 undefined，在第一次 console.log 中输出 undefined，后面才被赋值为 1；而在 IE 浏览器中，变量 a 会被默认声明为全局变量，第一次 console.log 中直接输出 1。

3.2 示例二

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>示例二</title>
</head>
<body>
  <script>
    var a = 1;
    function foo() {
      console.log(a);
      var a = 2;
    }
    foo();
    console.log(a);
  </script>
</body>
</html>

在 Chrome 和 Firefox 浏览器中，上面的代码会输出：

undefined
1

在 IE 浏览器中，上面的代码会输出：

1
1

原因是因为在函数 foo 中，变量 a 被声明为局部变量，会被默认初始化为 undefined，在第一次 console.log 中输出 undefined，后面才被赋值为 2。在函数外部，变量 a 的值为全局变量 a 的值，即 1。因此，在 Chrome 和 Firefox 浏览器中需要区分局部变量和全局变量，而在 IE 浏览器中变量 a 始终被看作全局变量。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：JavaScript 全面解析各种浏览器网页中的JS 执行顺序 - Python技术站