理解 ＜script＞ 标签的 defer 和 async 属性

当我们在编写网页时，经常需要在 HTML 文件中引入 JavaScript 文件。这时候，我们通常会使用

开始

在介绍 defer 和 async 属性之前，我们先来看一下

<script src="path/to/script.js"></script>

这段代码会在浏览器解析到它的时候，立即下载并执行 script.js 文件。如果我们需要在 HTML 文件中引入多个 JavaScript 文件，我们可以在页面中添加多个

<script src="path/to/script1.js"></script>
<script src="path/to/script2.js"></script>
<script src="path/to/script3.js"></script>

这样做的问题是，如果这些文件之间存在依赖关系，执行顺序可能会出现问题。比如说，如果 script2.js 需要依赖 script1.js 中定义的某个变量，那么如果 script2.js 先于 script1.js 执行，就会出现错误。为了解决这个问题，我们可以使用 defer 和 async 属性。

JS defer 和 async 属性的优缺点

defer 和 async 是用于控制 JavaScript 脚本加载和执行的属性。它们可以在 <script> 标签中使用。

defer 属性的优缺点：
优点：

1. 脚本的加载不会阻塞页面的解析，脚本会在页面解析完毕后执行。
2. 多个带有 defer 属性的脚本会按照它们在页面中出现的顺序依次执行。

缺点：

1. 脚本的执行时机不确定，可能会影响页面的行为和效果。
2. 不适合需要立即执行的脚本。

async 属性的优缺点：
优点：

1. 脚本的加载和执行是异步的，不会阻塞页面的解析和其他资源的加载。
2. 适合需要立即执行的脚本，可以提高页面加载速度。

缺点：

1. 多个带有 async 属性的脚本的执行顺序不确定，可能会导致依赖关系的问题。
2. 脚本的执行时机不确定，可能会影响页面的行为和效果。

总的来说，defer 适合需要按顺序执行的脚本，而 async 适合需要立即执行且不依赖其他脚本的情况。在实际使用中，可以根据具体情况选择合适的属性来控制脚本的加载和执行。

defer 属性

defer 属性表示延迟执行 JavaScript 文件。当浏览器解析到带有 defer 属性的

<script src="path/to/script1.js" defer></script>
<script src="path/to/script2.js" defer></script>
<script src="path/to/script3.js" defer></script>

在这个例子中，浏览器会立即下载这三个 JavaScript 文件，但是不会立即执行它们。而是等到页面解析完毕后，按照标签在页面中出现的顺序依次执行这三个文件。

需要注意的是，defer 属性只对外部 JavaScript 文件有效。如果

async 属性

async 属性表示异步执行 JavaScript 文件。当浏览器解析到带有 async 属性的

<script src="path/to/script1.js" async></script>
<script src="path/to/script2.js" async></script>
<script src="path/to/script3.js" async></script>

在这个例子中，浏览器会立即下载这三个 JavaScript 文件，并且不会阻塞页面的解析和渲染。一旦文件下载完成，浏览器会立即执行这三个文件。由于执行顺序是不确定的，所以这种方式只适用于那些不依赖其他 JavaScript 文件的代码。

需要注意的是，async 属性也只对外部 JavaScript 文件有效。如果

区别

defer 和 async 属性的区别在于，defer 属性保证 JavaScript 文件的执行顺序与它们在页面中出现的顺序一致，而 async 属性不保证执行顺序。另外，带有 defer 属性的

结论

在实际开发中，我们应该根据具体情况选择使用 defer 或 async 属性。如果 JavaScript 文件之间存在依赖关系，那么我们应该使用 defer 属性。如果 JavaScript 文件之间不存在依赖关系，那么我们可以使用 async 属性来提高页面加载速度。

以上就是 defer 和 async 属性的详细介绍。希望本文能够对大家有所帮助。