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

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

目录
相关文章
|
机器学习/深度学习 人工智能 搜索推荐
AIGC工具——PhotoRoom
【1月更文挑战第18天】AIGC工具——PhotoRoom
259 1
AIGC工具——PhotoRoom
|
存储 JavaScript 中间件
❤Nodejs 第十二章(图片存储接口-本地)
【4月更文挑战第12天】在Node.js第十二章中,主要讲解了错误中间件的编写和multer中间件的使用。错误中间件需置于所有路由之后,用于捕获并处理错误,防止接口崩溃。示例代码展示了如何处理token解析失败的错误。接着介绍了multer,它是处理multipart/form-data数据,尤其是用于文件上传的中间件。通过`yarn add --save multer`安装,并引入到项目中。最终,成功实现了图片上传并返回了可访问的图片路径。
222 2
|
JavaScript 前端开发 Go
async 和 defer的作用与区别
async 和 defer的作用与区别
|
11月前
|
存储 JavaScript 前端开发
vue2知识点:箭头函数和普通函数的this指向问题
vue2知识点:箭头函数和普通函数的this指向问题
170 18
|
JSON JavaScript 安全
JS深浅拷贝
本文介绍了JavaScript中实现数据拷贝的四种方法:`Object.assign()`, 扩展运算符(`...`), `JSON.parse(JSON.stringify())` 和递归深拷贝。`Object.assign()`及扩展运算符对基本数据类型进行深拷贝,而对引用类型则进行浅拷贝。`JSON.parse(JSON.stringify())`对所有类型的数据都执行深拷贝,但存在一些限制如日期类型被转为字符串等。递归深拷贝则避免了这些问题,并支持循环引用,是一种更安全的选择。
400 0
JS深浅拷贝
Echarts——如何默认选中图表并显示tooltip
Echarts——如何默认选中图表并显示tooltip
488 1
|
Web App开发 移动开发 JavaScript
面试官:说一下script 标签中 defer(推迟) 和 async(异步) 的区别
面试官:说一下script 标签中 defer(推迟) 和 async(异步) 的区别
313 0
|
机器学习/深度学习 自然语言处理 监控
金融行业的大数据风控模型:构建安全高效的信用评估体系
金融机构借助大数据风控提升信贷效率,通过数据收集、清洗、特征工程、模型构建与评估来识别风险。关键技术涉及机器学习、深度学习、NLP和实时处理。以下是一个Python风控模型构建的简例,展示了从数据预处理到模型训练、评估的过程,并提及实时监控预警的重要性。该文旨在阐述大数据风控的核心要素和关键技术,并提供基础的代码实现概念。【6月更文挑战第23天】
1793 8
|
JSON JavaScript 前端开发
TypeScript(十五)配置相关(命令行配置)
TypeScript(十五)配置相关(命令行配置)
179 4
|
关系型数据库 MySQL 数据库
java.sql.SQLException: Connections could not be acquired from the underlying database!
java.sql.SQLException: Connections could not be acquired from the underlying database!
732 0