<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

相关文章

JAVA覆盖和重写的区别及说明

《JAVA覆盖和重写的区别及说明》非静态方法的覆盖即重写,具有多态性;静态方法无法被覆盖,但可被重写(仅通过类名调用),二者区别在于绑定时机与引用类型关联性... 目录Java覆盖和重写的区别经常听到两种话认真读完上面两份代码JAVA覆盖和重写的区别经常听到两种话1.覆盖=重写。2.静态方法可andro

C++中全局变量和局部变量的区别

《C++中全局变量和局部变量的区别》本文主要介绍了C++中全局变量和局部变量的区别,全局变量和局部变量在作用域和生命周期上有显著的区别,下面就来介绍一下,感兴趣的可以了解一下... 目录一、全局变量定义生命周期存储位置代码示例输出二、局部变量定义生命周期存储位置代码示例输出三、全局变量和局部变量的区别作用域

Linux线程之线程的创建、属性、回收、退出、取消方式

《Linux线程之线程的创建、属性、回收、退出、取消方式》文章总结了线程管理核心知识:线程号唯一、创建方式、属性设置(如分离状态与栈大小)、回收机制(join/detach)、退出方法(返回/pthr... 目录1. 线程号2. 线程的创建3. 线程属性4. 线程的回收5. 线程的退出6. 线程的取消7.

MyBatis中$与#的区别解析

《MyBatis中$与#的区别解析》文章浏览阅读314次,点赞4次,收藏6次。MyBatis使用#{}作为参数占位符时,会创建预处理语句(PreparedStatement),并将参数值作为预处理语句... 目录一、介绍二、sql注入风险实例一、介绍#(井号):MyBATis使用#{}作为参数占位符时,会

Android kotlin中 Channel 和 Flow 的区别和选择使用场景分析

《Androidkotlin中Channel和Flow的区别和选择使用场景分析》Kotlin协程中,Flow是冷数据流,按需触发,适合响应式数据处理;Channel是热数据流,持续发送,支持... 目录一、基本概念界定FlowChannel二、核心特性对比数据生产触发条件生产与消费的关系背压处理机制生命周期

Javaee多线程之进程和线程之间的区别和联系(最新整理)

《Javaee多线程之进程和线程之间的区别和联系(最新整理)》进程是资源分配单位,线程是调度执行单位,共享资源更高效,创建线程五种方式:继承Thread、Runnable接口、匿名类、lambda,r... 目录进程和线程进程线程进程和线程的区别创建线程的五种写法继承Thread,重写run实现Runnab

C++中NULL与nullptr的区别小结

《C++中NULL与nullptr的区别小结》本文介绍了C++编程中NULL与nullptr的区别,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编... 目录C++98空值——NULLC++11空值——nullptr区别对比示例 C++98空值——NUL

Conda与Python venv虚拟环境的区别与使用方法详解

《Conda与Pythonvenv虚拟环境的区别与使用方法详解》随着Python社区的成长,虚拟环境的概念和技术也在不断发展,:本文主要介绍Conda与Pythonvenv虚拟环境的区别与使用... 目录前言一、Conda 与 python venv 的核心区别1. Conda 的特点2. Python v

java中反射Reflection的4个作用详解

《java中反射Reflection的4个作用详解》反射Reflection是Java等编程语言中的一个重要特性,它允许程序在运行时进行自我检查和对内部成员(如字段、方法、类等)的操作,本文将详细介绍... 目录作用1、在运行时判断任意一个对象所属的类作用2、在运行时构造任意一个类的对象作用3、在运行时判断

Go语言中make和new的区别及说明

《Go语言中make和new的区别及说明》:本文主要介绍Go语言中make和new的区别及说明,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录1 概述2 new 函数2.1 功能2.2 语法2.3 初始化案例3 make 函数3.1 功能3.2 语法3.3 初始化