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

本文涉及的产品
全局流量管理 GTM,标准版 1个月
云解析 DNS,旗舰版 1个月
公共DNS(含HTTPDNS解析),每月1000万次HTTP解析
简介: <script> 标签的 defer 和 asnyc 属性的作用以及二者的区别

前言

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

<script>标签的defer属性

用法

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

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

script1.jsscript2.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.jsscript2.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.jsscript2.js中的代码与之前的例子相同。

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

Script 1 Loaded!
Script 2 Loaded!

或者

Script 2 Loaded!
Script 1 Loaded!

理解

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

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

deferasync的区别

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

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

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

结论

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

目录
相关文章
|
7月前
|
缓存 JavaScript
解释 Vue 的计算属性和监视属性的区别。
解释 Vue 的计算属性和监视属性的区别。
74 6
|
7月前
|
自然语言处理 JavaScript 前端开发
作用域的概念及作用?作用域的分类?.js 属于哪种作用域?
作用域的概念及作用?作用域的分类?.js 属于哪种作用域?
75 0
|
1月前
|
前端开发 JavaScript 开发者
HTML 中的全局属性和局部属性是否可以相互覆盖?
【10月更文挑战第27天】HTML中的全局属性和局部属性在正常使用情况下不会相互覆盖,但在涉及CSS样式和JavaScript操作等特殊情况下,可能会出现类似覆盖的效果。开发者需要理解属性的功能、作用域和优先级,遵循最佳实践,以确保HTML文档的结构清晰、功能正常且易于维护。
|
6月前
|
存储 JavaScript 前端开发
HTML标签data-属性的作用
HTML标签data-属性的作用
|
7月前
|
JavaScript 前端开发
js中改变this指向、动态指定函数 this 值的方法
js中改变this指向、动态指定函数 this 值的方法
|
7月前
|
存储 前端开发 JavaScript
css的变量和自定义变量概念
css的变量和自定义变量概念
|
6月前
|
UED
简述a标签target属性的取值和作用
简述a标签target属性的取值和作用
60 0
|
7月前
|
前端开发 JavaScript
前端 JS 经典:判断对象属性是否存在
前端 JS 经典:判断对象属性是否存在
129 0
|
7月前
|
JavaScript 前端开发
js中new关键字的作用,new一个对象的过程中发生了什么
js中new关键字的作用,new一个对象的过程中发生了什么
|
前端开发 JavaScript Go
script标签中async和defer的作用和区别?简述css盒模型?什么是闭包?
浏览器遇到script标签没有async和defer属性时,页面将会暂停解析来下载并执行script脚本,执行完毕继续解析页面(这样会阻塞页面,所以建议把script标签放在html底部)。
script标签中async和defer的作用和区别?简述css盒模型?什么是闭包?