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或通过事件控制执行时机。
