js defer async

defer 和 async 是 HTML 中 <script> 标签的两个属性，用于控制 JavaScript 脚本的加载和执行时机，从而优化页面的加载性能。

基础概念

• defer: 当脚本设置了 defer 属性，浏览器会在下载脚本的同时继续解析 HTML 页面。脚本会在页面解析完成后，但在 DOMContentLoaded 事件触发之前按顺序执行。
• async: 当脚本设置了 async 属性，脚本会立即开始下载，并且下载完成后会立即执行。多个带有 async 属性的脚本之间的执行顺序不保证。

优势

• 提高页面加载速度: 通过异步加载脚本，可以避免阻塞页面的渲染，使得页面内容更快地呈现给用户。
• 更好的资源管理: defer 允许脚本在文档完全解析后执行，确保脚本执行时 DOM 已经准备好，而 async 则适合那些不依赖 DOM 或其他脚本的独立脚本。

类型与应用场景

• defer:
  • 应用场景: 当脚本需要访问完整的 DOM 结构，并且脚本之间有依赖关系时。
  • 示例: 主脚本文件，依赖于 DOM 完全加载后的操作。
• async:
  • 应用场景: 当脚本独立于其他脚本和 DOM 结构，或者脚本的执行不需要等待 DOM 加载完成时。
  • 示例: 分析代码、广告代码等。

遇到的问题及解决方法

问题: 使用 defer 或 async 后脚本未按预期执行。

原因:

• 可能是由于脚本之间存在依赖关系，但使用了 async 属性，导致脚本执行顺序无法保证。
• 或者是因为脚本内部有错误，导致脚本执行失败。

解决方法:

• 对于有依赖关系的脚本，使用 defer 并确保脚本按正确的顺序列出。
• 检查脚本内部是否有语法错误或运行时错误，并进行修复。

示例代码

<!-- 使用 defer 属性 -->
<script src="main.js" defer></script>
<script src="utils.js" defer></script> <!-- 假设 main.js 依赖于 utils.js -->

<!-- 使用 async 属性 -->
<script src="analytics.js" async></script> <!-- analytics.js 不依赖于其他脚本 -->

在这个例子中，main.js 和 utils.js 都设置了 defer，因此它们会在页面解析完成后按顺序执行。而 analytics.js 设置了 async，它将在下载完成后立即执行，不保证与其他脚本的执行顺序。

通过合理使用 defer 和 async 属性，可以有效提升网页的性能和用户体验。