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代码的多种选择。
