<!DOCTYPE html>
<html>
<head>
<title>Async vs. Defer</title>
</head>
<body>
<p>Hello, world!</p>
<!-- 异步加载脚本 -->
<script src="script1.js" async></script>
<!-- 带有 defer 属性的脚本 -->
<script src="script2.js" defer></script>
</body>
</html>
执行区别:
1、script1.js(带有async属性):
异步加载:脚本会异步加载,不会阻止HTML解析。
执行时机:脚本会在下载完成后立即执行,可能在DOM解析之前或之后执行,具体取决于脚本加载速度。
适用场景:适用于独立的脚本,不依赖于其他脚本或DOM元素的情况,例如跟踪分析或广告脚本。
2、script2.js(带有defer属性):
异步加载:脚本也会异步加载,不会阻止HTML解析。
执行时机:脚本会在HTML解析完成后,但在DOMContentLoaded事件之前执行。这意味着它在DOM就绪后执
行,可以访问和操作DOM元素。
适用场景:适用于需要等待整个DOM加载完成后才能执行的脚本,或者依赖于其他脚本或DOM元素的脚本。
对于执行区别的图示,你可以参考下面的描述:
script1.js(async)可能会在DOM解析之前或之后执行,因为它异步加载且立即执行。
script2.js(defer)会在HTML解析完成后但在DOMContentLoaded事件之前执行,确保在DOM就绪后执行。
这种执行区别在优化页面性能和脚本依赖关系方面非常有用,可以根据具体需求选择适当的属性。
//yourScript.js
document.addEventListener("DOMContentLoaded", function () {
// 在这里进行样式修改,此时DOM已经解析完毕但资源可能尚未加载完成
...
}