js实现defer

js实现defer

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

使用DOMContentLoaded事件

通过监听DOMContentLoaded事件，可以确保脚本在DOM完全加载后执行：

document.addEventListener('DOMContentLoaded', function() {
    // 在这里编写需要延迟执行的代码
    console.log('DOM fully loaded and parsed');
});

动态创建script标签并设置defer属性

可以动态创建<script>标签并设置defer属性：

var script = document.createElement('script');
script.src = 'your-script.js';
script.defer = true;
document.head.appendChild(script);

使用setTimeout延迟执行

虽然不推荐，但可以通过setTimeout实现类似延迟效果：

setTimeout(function() {
    // 延迟执行的代码
}, 0);

使用async/defer结合Promise

对于更复杂的场景，可以结合Promise和async/await：

function deferExecution() {
    return new Promise(resolve => {
        if (document.readyState === 'complete') {
            resolve();
        } else {
            window.addEventListener('load', resolve);
        }
    });
}

async function runDeferred() {
    await deferExecution();
    // 延迟执行的代码
}

runDeferred();

注意事项

• 原生defer属性只对外部脚本有效，对内联脚本无效
• 动态创建的脚本默认是异步加载的，设置defer可以改变其行为
• 多个defer脚本会按它们在文档中出现的顺序执行

以上方法提供了在不同场景下实现延迟执行JavaScript代码的多种选择。