defer js 实现

defer 属性在 JavaScript 中的实现

defer 是 HTML <script> 标签的一个属性，用于控制脚本的加载和执行时机。通过添加 defer 属性，可以延迟脚本的执行，直到 HTML 文档解析完成后再执行。

基本用法

在 HTML 中，可以通过以下方式使用 defer 属性：

<script src="script.js" defer></script>

带有 defer 属性的脚本会在文档解析完成后按照它们在文档中出现的顺序依次执行。

与普通脚本加载的区别

普通脚本（无 defer 或 async 属性）会阻塞 HTML 解析，直到脚本下载并执行完毕。而 defer 脚本会在后台下载，同时允许 HTML 继续解析，最后在文档解析完成后按顺序执行。

与 async 属性的区别

async 和 defer 都允许脚本在后台下载而不阻塞 HTML 解析，但它们的执行时机不同：

• async 脚本下载完成后立即执行，顺序无法保证。
• defer 脚本在文档解析完成后按顺序执行。

适用场景

defer 适用于那些依赖 DOM 或其他脚本的代码，因为它能确保脚本在 DOM 完全解析后执行。如果脚本之间没有依赖关系，可以使用 async 以提高页面加载速度。

现代 JavaScript 模块的 defer 行为

对于 type="module" 的脚本，默认行为类似于 defer，无需显式声明：

<script type="module" src="module.js"></script>

模块脚本会延迟执行，直到文档解析完成，并且按顺序执行。

注意事项

• defer 仅适用于外部脚本（带有 src 属性的脚本）。
• 内联脚本（无 src 属性）即使设置了 defer 也会立即执行。
• 多个 defer 脚本会按照它们在文档中的顺序执行。