defer js 实现

defer 属性简介

defer 是 <script> 标签的一个布尔属性，用于告知浏览器该脚本可以延迟执行，直到文档解析完成后再运行。这种方式不会阻塞 HTML 解析，适合用于不依赖 DOM 操作的脚本。

基本用法

在 HTML 文件中，直接在 <script> 标签中添加 defer 属性即可：

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

浏览器会异步下载脚本文件，但延迟到文档解析完成后才执行。

执行顺序保证

多个带有 defer 属性的脚本会按照它们在文档中出现的顺序依次执行。例如：

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

即使 b.js 先下载完成，也会等待 a.js 执行完毕后再执行。

与 async 的区别

defer 和 async 都用于异步加载脚本，但行为不同：

• defer：脚本按顺序执行，在 DOMContentLoaded 事件前触发。
• async：脚本下载完成后立即执行，顺序无法保证。

适用场景

defer 适用于以下情况：

• 脚本依赖完整的 DOM 结构
• 多个脚本之间有执行顺序依赖
• 不需要在加载阶段立即执行的逻辑

注意事项

• 内联脚本（无 src 属性）的 defer 属性无效
• document.write 在延迟脚本中不可用
• 动态插入的 <script> 标签的 defer 属性可能被忽略

兼容性处理

现代浏览器均支持 defer 属性。对于老旧浏览器，可以手动实现类似功能：

document.addEventListener('DOMContentLoaded', function() {
  // 在此处加载或执行脚本
});

性能优化建议

将不影响首屏渲染的脚本标记为 defer，特别是第三方分析脚本、非关键功能脚本等。关键路径脚本应避免使用 defer，以确保及时执行。