js 实现 defer

在 JavaScript 中，defer 是一种脚本加载属性，用于延迟脚本的执行，直到 HTML 文档解析完成。以下是几种实现类似 defer 功能的方法：

使用 defer 属性

在 HTML 中直接为 <script> 标签添加 defer 属性，这是最直接的方式：

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

defer 确保脚本在文档解析完成后按顺序执行，但不会阻塞 DOM 构建。

动态加载脚本

通过 JavaScript 动态创建 <script> 标签并设置 defer 属性：

const script = document.createElement('script');
script.src = 'script.js';
script.defer = true;
document.head.appendChild(script);

这种方式适用于需要动态加载脚本的场景。

监听 DOMContentLoaded 事件

通过监听 DOMContentLoaded 事件延迟脚本执行，模拟 defer 行为：

document.addEventListener('DOMContentLoaded', () => {
  // 在这里执行需要延迟的代码
  console.log('DOM 解析完成，脚本现在执行');
});

这种方法适用于内联脚本或需要更灵活控制的场景。

使用 async 与 Promise

结合 async 和 Promise 实现类似 defer 的效果：

async function loadDeferredScript() {
  await new Promise(resolve => {
    window.addEventListener('load', resolve);
  });
  // 延迟执行的代码
  console.log('页面加载完成，脚本执行');
}
loadDeferredScript();

这种方法适用于需要等待所有资源（包括图片等）加载完成的场景。

模块化加载（ES Modules）

使用 ES Modules 的 type="module" 特性，默认具有 defer 行为：

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

模块脚本默认延迟执行，且支持更现代的模块化语法。