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

锅盖哒

已于 2023-10-30 20:28:39 修改

阅读量184

点赞数

文章标签： javascript

于 2023-10-27 11:32:24 首次发布

本文链接：https://blog.csdn.net/A12536365214/article/details/134072788

版权

🙂博主：锅盖哒
🙂文章核心：＜script＞标签的 defer 和 asnyc 属性的作用以及二者的区别

前言

在现代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页面时，你可能会在控制台看到：

Script 1 Loaded!
Script 2 Loaded!

或者

Script 2 Loaded!
Script 1 Loaded!

理解

async属性的主要优势是它允许浏览器并行下载脚本，而不必等待其他脚本或HTML文档解析完成。这意味着页面的可见部分可以更快地呈现给用户。

然而，由于async脚本不保证按顺序执行，它们最适合那些不依赖于DOM、CSSOM或其他脚本的独立模块。

`defer`与`async`的区别

虽然defer和async都允许浏览器并行下载脚本，但它们在脚本执行的时机和顺序方面有重要的区别。

defer保证脚本按照在文档中出现的顺序执行，并且只在HTML文档解析完成后执行。
async不保证脚本按顺序执行，脚本会在下载完成后尽快执行。

选择使用defer还是async取决于你的具体需求和脚本之间的依赖关系。如果脚本之间有依赖关系，或者脚本需要在HTML文档完全解析后执行，defer是一个更好的选择。如果脚本是独立的，并且你希望它们尽快执行，async可能是更好的选择。

结论

理解<script>标签的defer和async属性及其区别对于优化Web页面性能和提高用户体验至关重要。通过合理使用这两个属性，开发者可以确保JavaScript脚本以最高效的方式加载和执行，从而提供更快、更流畅的页面加载体验。

锅盖哒

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
＜script＞标签的 defer 和 asnyc 属性的作用以及二者的区别

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

扫一扫