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

2023-10-28 06:12

本文主要是介绍<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脚本以最高效的方式加载和执行,从而提供更快、更流畅的页面加载体验。

这篇关于<script> 标签的 defer 和 asnyc 属性的作用以及二者的区别的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/291253

相关文章

go 指针接收者和值接收者的区别小结

《go指针接收者和值接收者的区别小结》在Go语言中,值接收者和指针接收者是方法定义中的两种接收者类型,本文主要介绍了go指针接收者和值接收者的区别小结,文中通过示例代码介绍的非常详细,需要的朋友们下... 目录go 指针接收者和值接收者的区别易错点辨析go 指针接收者和值接收者的区别指针接收者和值接收者的

售价599元起! 华为路由器X1/Pro发布 配置与区别一览

《售价599元起!华为路由器X1/Pro发布配置与区别一览》华为路由器X1/Pro发布,有朋友留言问华为路由X1和X1Pro怎么选择,关于这个问题,本期图文将对这二款路由器做了期参数对比,大家看... 华为路由 X1 系列已经正式发布并开启预售,将在 4 月 25 日 10:08 正式开售,两款产品分别为华

Spring Boot项目部署命令java -jar的各种参数及作用详解

《SpringBoot项目部署命令java-jar的各种参数及作用详解》:本文主要介绍SpringBoot项目部署命令java-jar的各种参数及作用的相关资料,包括设置内存大小、垃圾回收... 目录前言一、基础命令结构二、常见的 Java 命令参数1. 设置内存大小2. 配置垃圾回收器3. 配置线程栈大小

Spring Security基于数据库的ABAC属性权限模型实战开发教程

《SpringSecurity基于数据库的ABAC属性权限模型实战开发教程》:本文主要介绍SpringSecurity基于数据库的ABAC属性权限模型实战开发教程,本文给大家介绍的非常详细,对大... 目录1. 前言2. 权限决策依据RBACABAC综合对比3. 数据库表结构说明4. 实战开始5. MyBA

一文详解JavaScript中的fetch方法

《一文详解JavaScript中的fetch方法》fetch函数是一个用于在JavaScript中执行HTTP请求的现代API,它提供了一种更简洁、更强大的方式来处理网络请求,:本文主要介绍Jav... 目录前言什么是 fetch 方法基本语法简单的 GET 请求示例代码解释发送 POST 请求示例代码解释

kotlin中const 和val的区别及使用场景分析

《kotlin中const和val的区别及使用场景分析》在Kotlin中,const和val都是用来声明常量的,但它们的使用场景和功能有所不同,下面给大家介绍kotlin中const和val的区别,... 目录kotlin中const 和val的区别1. val:2. const:二 代码示例1 Java

CSS Padding 和 Margin 区别全解析

《CSSPadding和Margin区别全解析》CSS中的padding和margin是两个非常基础且重要的属性,它们用于控制元素周围的空白区域,本文将详细介绍padding和... 目录css Padding 和 Margin 全解析1. Padding: 内边距2. Margin: 外边距3. Padd

CSS will-change 属性示例详解

《CSSwill-change属性示例详解》will-change是一个CSS属性,用于告诉浏览器某个元素在未来可能会发生哪些变化,本文给大家介绍CSSwill-change属性详解,感... will-change 是一个 css 属性,用于告诉浏览器某个元素在未来可能会发生哪些变化。这可以帮助浏览器优化

CSS去除a标签的下划线的几种方法

《CSS去除a标签的下划线的几种方法》本文给大家分享在CSS中,去除a标签(超链接)的下划线的几种方法,本文给大家介绍的非常详细,感兴趣的朋友一起看看吧... 在 css 中,去除a标签(超链接)的下划线主要有以下几种方法:使用text-decoration属性通用选择器设置:使用a标签选择器,将tex

Java编译生成多个.class文件的原理和作用

《Java编译生成多个.class文件的原理和作用》作为一名经验丰富的开发者,在Java项目中执行编译后,可能会发现一个.java源文件有时会产生多个.class文件,从技术实现层面详细剖析这一现象... 目录一、内部类机制与.class文件生成成员内部类(常规内部类)局部内部类(方法内部类)匿名内部类二、