页面中js执行顺序

2023年5月28日下午6:28 • JavaScript

下面是页面中js执行顺序的完整攻略。

执行顺序

在页面中，JavaScript脚本可以通过多种方式嵌入到HTML文档中，如内联脚本、外部脚本和动态添加脚本等。JavaScript脚本的执行顺序有以下规则：

按照文档内的顺序解析脚本，在HTML文档中与JavaScript相关的所有元素按照它们在文档中的顺序来解析。因此，文档中后面出现的脚本无法使用文档前面定义的变量和函数。
按照异步加载的顺序执行脚本，当使用<script>标签引入外部脚本时，可以通过将async或defer属性设置为true来控制脚本的执行时间。async表示页面加载的同时异步加载脚本，而脚本的响应速度通常比页面快，所以脚本的执行顺序是不确定的；defer则表示该脚本将在页面解析完毕后执行，多个延迟执行的脚本会按照它们在文档顺序上的先后顺序依次执行。
在执行脚本时必须先加载执行所需的外部脚本、文件和图片等资源，否则浏览器会挂起执行，等待资源加载完成后再执行。

示例说明

下面举两个例子，来说明JavaScript脚本的执行顺序。

示例1

HTML代码：

<!DOCTYPE html>
<html>
<head>
  <script src="a.js"></script>
</head>
<body>
  <h1>Hello World!</h1>
  <script src="b.js"></script>
</body>
</html>

其中a.js内容如下：

console.log("a.js loaded");

b.js内容如下：

console.log("b.js loaded");

当浏览器解析这个页面时，先加载a.js，输出"a.js loaded"，然后才是b.js，输出"b.js loaded"。

因此，这个例子说明了文档内的顺序和先后顺序两个规则。

示例2

HTML代码：

<!DOCTYPE html>
<html>
<head>
  <script src="a.js" defer></script>
  <script src="b.js" defer></script>
</head>
<body>
  <h1>Hello World!</h1>
  <script src="c.js"></script>
</body>
</html>

其中a.js和b.js的内容如下：

console.log("a.js loaded");
console.log("b.js loaded");

c.js的内容如下：

console.log("c.js loaded");

当浏览器解析这个页面时，先加载并解析a.js和b.js，但是它们不会立即执行，而是等待文档解析完成后，在文档元素按照顺序执行完毕后，按照它们在文档顺序上的先后顺序依次执行。所以在本例中，c.js会先于a.js和b.js执行，输出"c.js loaded"，然后才是a.js和b.js，分别输出"a.js loaded"和"b.js loaded"。

因此，这个例子说明了延迟加载和异步加载两个规则。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：页面中js执行顺序 - Python技术站