js 实现 defer

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

使用 defer 属性

在 HTML 中直接为 <script> 标签添加 defer 属性，浏览器会异步加载脚本但延迟执行，直到 DOM 解析完成。

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

动态加载脚本

通过 JavaScript 动态创建 <script> 标签并设置 defer 属性，实现延迟加载。

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

监听 DOMContentLoaded 事件

将脚本逻辑包装在 DOMContentLoaded 事件监听器中，确保脚本在 DOM 解析完成后执行。

document.addEventListener('DOMContentLoaded', function() {
    // 脚本逻辑
});

使用 async 和 Promise

结合 async 和 Promise 实现类似 defer 的效果，确保脚本在 DOM 准备好后执行。

async function loadDeferredScript() {
    await new Promise(resolve => {
        if (document.readyState === 'complete') {
            resolve();
        } else {
            document.addEventListener('DOMContentLoaded', resolve);
        }
    });
    // 脚本逻辑
}
loadDeferredScript();

模块化加载

使用 ES6 模块的 import 语法，模块默认具有 defer 行为。

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

注意事项

• defer 仅适用于外部脚本（带有 src 属性的 <script> 标签）。
• 多个 defer 脚本会按顺序执行，而 async 脚本执行顺序不确定。
• 动态创建的脚本默认是异步的，需显式设置 defer 或通过事件控制执行时机。