一、属性介绍:
1、async:表示应该立即开始下载脚本,但不能阻止其他的页面动作,比如下载资源或等待其他脚本加载。只对外部脚本文件有效。
2、defer:表示脚本可以延迟到文档完全被解析和显示之后再执行。只对外部脚本文件有效。(在IE7及更早的版本中,在行内脚本也可以指定这个属性)。
二、详细介绍:
1.async --异步执行脚本
使用async就相当于告诉浏览器立即下载脚本,此时和页面的渲染是异步的,但是当脚本加载完毕后会立即执行改脚本,如果此时HTML还未解析完成,会造成阻塞。
以下是使用 async
修饰的 <script>
标签的示例:
<!DOCTYPE html>
<html>
<head>
<title>使用 async 修饰的 script 标签</title>
<script async src="script1.js"></script>
<script async src="script2.js"></script>
</head>
<body>
<h1>使用 async 修饰的 script 标签</h1>
</body>
</html>
在上面的示例中,我们在 <script>
标签中添加了 async
属性,并指定了脚本文件的路径 "script.js"
。这样浏览器会异步加载该脚本,而不会阻塞页面的渲染。(注意这里是加载不是执行)
**请注意,由于脚本是异步加载的,它将在加载完成后立即执行,而不会按照它们在文档中的顺序执行。这意味着 script2.js 脚本可能先于 script1.js 脚本执行。因此,如果脚本之间有依赖关系,需要谨慎管理加载顺序。
此外,使用 async
修饰的脚本会在它们被加载时立即执行,而不需要等待整个文档解析完成。这可能会导致一些问题,例如脚本可能无法访问尚未解析的 DOM 元素。为了避免这些问题,通常建议将脚本放置在 <body>
元素的结尾,以确保在脚本执行时 DOM 已经完全解析。
2.defer
--推迟执行脚本
defer
属性也用于异步加载脚本,但与 async
不同的是,defer加载完后不会立即执行,
会延迟到整个页面解析完成在执行, defer
会保持脚本的执行顺序与其在文档中的顺序一致。
<!DOCTYPE html>
<html>
<head>
<title>使用 defer 修饰的 script 标签</title>
<script defer src="script1.js"></script>
<script defer src="script2.js"></script>
<script defer src="script3.js"></script>
</head>
<body>
<h1>使用 defer 修饰的 script 标签</h1>
</body>
</html>
在上面的示例中,我们在三个 <script>
标签中添加了 defer
属性,并指定了每个脚本文件的路径。这样浏览器会异步加载这些脚本,并按照它们在文档中的顺序依次执行。
与 async
不同,使用 defer
修饰的脚本会在整个文档解析完成后执行,但在 DOMContentLoaded
事件之前执行。这意味着脚本可以访问完整的 DOM 结构,而不必等待整个文档加载完成。
注意:defer
和 async
属性不能同时在一个标签中使用,因为它们具有相互排斥的效果。
使用 async
和 defer
修饰的 <script>
标签可以帮助提高页面加载性能和渲染速度,但在使用时需要根据实际需求进行选择。
三、总结
1.相同点
1.
表示async和defer都只能用于外部脚本文件。
2.
都是异步加载脚本文件
2.不同点
1.defer在HtML解析完成后执行,async加载完立即执行,可能阻塞HTML的解析(是执行导致的,不是加载)。
2.defer延迟执行,执行的顺序不会改变;async的执行顺序与其加载速度有关,先加载完先执行。
四、知识点补充
1.DOMContentLoaded事件
在 HTML 文档解析过程中,当浏览器完成构建 DOM 树,所有的初始 HTML 已经完全加载和解析,但外部资源(如图片、样式表和嵌入的框架)可能还没有完全下载时触发。也就是说,DOMContentLoaded
事件标志着页面的基本结构已经准备就绪,可以进行操作和修改 DOM 元素。
2.load事件
load
事件是在整个 HTML 文档以及所有的外部资源(如图片、样式表、嵌入的框架等)都已经完全加载和解析完成后触发的事件。
使用 load
事件可以确保页面的所有资源都已经被下载并解析完成,可以进行一些比较耗时或需要等待资源加载的操作。不过需要注意的是,load
事件的触发时间比 DOMContentLoaded
事件要晚,所以在处理一些与页面元素相关的操作时,需要选择合适的事件来监听。