<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

相关文章

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 初始化

python常用的正则表达式及作用

《python常用的正则表达式及作用》正则表达式是处理字符串的强大工具,Python通过re模块提供正则表达式支持,本文给大家介绍python常用的正则表达式及作用详解,感兴趣的朋友跟随小编一起看看吧... 目录python常用正则表达式及作用基本匹配模式常用正则表达式示例常用量词边界匹配分组和捕获常用re

python删除xml中的w:ascii属性的步骤

《python删除xml中的w:ascii属性的步骤》使用xml.etree.ElementTree删除WordXML中w:ascii属性,需注册命名空间并定位rFonts元素,通过del操作删除属... 可以使用python的XML.etree.ElementTree模块通过以下步骤删除XML中的w:as

深度解析Spring Boot拦截器Interceptor与过滤器Filter的区别与实战指南

《深度解析SpringBoot拦截器Interceptor与过滤器Filter的区别与实战指南》本文深度解析SpringBoot中拦截器与过滤器的区别,涵盖执行顺序、依赖关系、异常处理等核心差异,并... 目录Spring Boot拦截器(Interceptor)与过滤器(Filter)深度解析:区别、实现

Java 继承和多态的作用及好处

《Java继承和多态的作用及好处》文章讲解Java继承与多态的概念、语法及应用,继承通过extends复用父类成员,减少冗余;多态实现方法重写与向上转型,提升灵活性与代码复用性,动态绑定降低圈复杂度... 目录1. 继承1.1 什么是继承1.2 继承的作用和好处1.3 继承的语法1.4 子类访问父类里面的成