<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编译生成多个.class文件的原理和作用

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

Springboot @Autowired和@Resource的区别解析

《Springboot@Autowired和@Resource的区别解析》@Resource是JDK提供的注解,只是Spring在实现上提供了这个注解的功能支持,本文给大家介绍Springboot@... 目录【一】定义【1】@Autowired【2】@Resource【二】区别【1】包含的属性不同【2】@

Java中的String.valueOf()和toString()方法区别小结

《Java中的String.valueOf()和toString()方法区别小结》字符串操作是开发者日常编程任务中不可或缺的一部分,转换为字符串是一种常见需求,其中最常见的就是String.value... 目录String.valueOf()方法方法定义方法实现使用示例使用场景toString()方法方法

MyBatis 动态 SQL 优化之标签的实战与技巧(常见用法)

《MyBatis动态SQL优化之标签的实战与技巧(常见用法)》本文通过详细的示例和实际应用场景,介绍了如何有效利用这些标签来优化MyBatis配置,提升开发效率,确保SQL的高效执行和安全性,感... 目录动态SQL详解一、动态SQL的核心概念1.1 什么是动态SQL?1.2 动态SQL的优点1.3 动态S

Python基于wxPython和FFmpeg开发一个视频标签工具

《Python基于wxPython和FFmpeg开发一个视频标签工具》在当今数字媒体时代,视频内容的管理和标记变得越来越重要,无论是研究人员需要对实验视频进行时间点标记,还是个人用户希望对家庭视频进行... 目录引言1. 应用概述2. 技术栈分析2.1 核心库和模块2.2 wxpython作为GUI选择的优

分辨率三兄弟LPI、DPI 和 PPI有什么区别? 搞清分辨率的那些事儿

《分辨率三兄弟LPI、DPI和PPI有什么区别?搞清分辨率的那些事儿》分辨率这个东西,真的是让人又爱又恨,为了搞清楚它,我可是翻阅了不少资料,最后发现“小7的背包”的解释最让我茅塞顿开,于是,我... 在谈到分辨率时,我们经常会遇到三个相似的缩写:PPI、DPI 和 LPI。虽然它们看起来差不多,但实际应用

GORM中Model和Table的区别及使用

《GORM中Model和Table的区别及使用》Model和Table是两种与数据库表交互的核心方法,但它们的用途和行为存在著差异,本文主要介绍了GORM中Model和Table的区别及使用,具有一... 目录1. Model 的作用与特点1.1 核心用途1.2 行为特点1.3 示例China编程代码2. Tab

JavaScript错误处理避坑指南

《JavaScript错误处理避坑指南》JavaScript错误处理是编程过程中不可避免的部分,它涉及到识别、捕获和响应代码运行时可能出现的问题,本文将详细给大家介绍一下JavaScript错误处理的... 目录一、错误类型:三大“杀手”与应对策略1. 语法错误(SyntaxError)2. 运行时错误(R

C++ 中的 if-constexpr语法和作用

《C++中的if-constexpr语法和作用》if-constexpr语法是C++17引入的新语法特性,也被称为常量if表达式或静态if(staticif),:本文主要介绍C++中的if-c... 目录1 if-constexpr 语法1.1 基本语法1.2 扩展说明1.2.1 条件表达式1.2.2 fa

JavaScript Array.from及其相关用法详解(示例演示)

《JavaScriptArray.from及其相关用法详解(示例演示)》Array.from方法是ES6引入的一个静态方法,用于从类数组对象或可迭代对象创建一个新的数组实例,本文将详细介绍Array... 目录一、Array.from 方法概述1. 方法介绍2. 示例演示二、结合实际场景的使用1. 初始化二