<!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已经解析完毕但资源可能尚未加载完成
...
}
774
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
