＜script＞标签的 defer 和 asnyc 属性的作用以及二者的区别

news2024/10/1 1:29:46

前言

在现代Web开发中，JavaScript的使用几乎是不可避免的。随着Web应用变得越来越复杂，JavaScript文件的大小也在不断增长。为了提高页面加载性能，浏览器提供了async和defer两个属性，用于改变浏览器加载和执行JavaScript文件的方式。理解这两个属性的作用和区别对于优化页面加载时间和用户体验至关重要。

`<script>`标签的`defer`属性

用法

defer属性是一个布尔属性，当存在时，它会改变浏览器处理JavaScript脚本的方式。具体来说，带有defer属性的<script>标签不会阻塞HTML的解析，而是会并行下载脚本，并在整个HTML文档解析完成后，按照脚本在文档中出现的顺序执行。

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

script1.js和script2.js将被并行下载，但script1.js会在script2.js之前执行，无论它们的下载顺序如何。

代码示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>Hello, World!</h1>
    <script defer src="script1.js"></script>
    <script defer src="script2.js"></script>
</body>
</html>

在script1.js中：

console.log('Script 1 Loaded!');

在script2.js中：

console.log('Script 2 Loaded!');

当你打开这个HTML页面时，你会在控制台看到：

Script 1 Loaded!
Script 2 Loaded!

理解

使用defer属性的主要优势是它允许浏览器继续解析HTML文档，而不是停下来等待JavaScript文件的下载和执行。这意味着页面的可见部分（如文本和图片）可以更快地呈现给用户，从而提供更好的用户体验。

defer属性确保脚本在文档解析完成后按顺序执行，这对于那些依赖于DOM或其他脚本的脚本来说是非常重要的。

`<script>`标签的`async`属性

用法

async属性也是一个布尔属性，它改变了浏览器处理JavaScript脚本的方式。带有async属性的<script>标签不会阻塞HTML的解析，脚本会在下载完成后尽快执行，而不必等待其他脚本或HTML文档解析完成。

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

script1.js和script2.js将被并行下载，并且哪个脚本先下载完成，哪个就先执行。

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>Hello, World!</h1>
    <script async src="script1.js"></script>
    <script async src="script2.js"></script>
</body>
</html>

在script1.js和script2.js中的代码与之前的例子相同。

当你打开这个HTML页面时，你可能会在控制台看到：