搜索

回答

async、defer 和 DOMContentLoaded 都涉及到HTML文档中脚本的加载和执行，但它们有不同的用途和行为。

async 属性：

当您在 <script> 标签中使用 async 属性时，脚本会异步加载，不会阻止页面的解析和渲染。

脚本会在加载完成后立即执行，而不管其在页面中的位置如何。这意味着脚本可能在页面的其他内容加载和解析之前运行。

如果有多个脚本使用 async 属性，并且它们之间有依赖关系，执行顺序可能会不确定。

适合用于不需要按顺序执行的独立脚本。

示例：<script src="script1.js" async></script>

defer 属性：

当您在 <script> 标签中使用 defer 属性时，脚本也会异步加载，但不会立即执行。

脚本会在页面解析完毕（DOM 树构建完成）之后，按照它们在页面中的顺序执行。

defer 保证了脚本按照它们在页面中的顺序执行，且在 DOMContentLoaded 事件之前完成执行。

适合用于需要按照顺序执行，但不需要阻止页面解析的脚本。示例：

DOMContentLoaded 事件：

DOMContentLoaded 是一个文档级事件，当整个HTML文档被解析和构建完毕后触发。

通常情况下，DOMContentLoaded 事件发生时，所有的DOM元素都已经可以操作了，但不一定包括外部资源如图片等的加载完成。

您可以使用这个事件来确保脚本在文档完全构建后执行，以防止脚本尝试操作尚未存在的DOM元素。

示例：

document.addEventListener('DOMContentLoaded', function() {

// 在文档构建完毕后执行脚本

});

总结：async 和 defer 用于控制脚本的加载和执行方式，而 DOMContentLoaded 是一个事件，用于在文档构建完毕后执行脚本。选择使用哪种取决于您的需求，是否需要按照顺序执行脚本以及是否需要等待整个文档构建完成。

网友回复

我知道答案，我要回答

我有问题

私活外包