标签中的 defer 和 async 属性是用来控制外部脚本加载和执行时机的重要机制，它们可以帮助优化网页加载速度和用户体验。

async 属性

async 表示异步加载脚本。当 标签包含 async 属性时：

  • 脚本下载和其他资源（如 HTML、CSS 和其他脚本）的下载同时进行，不会阻塞页面渲染。
  • 脚本在下载完成后立即执行，不论文档解析是否完成。
  • 多个带有 async 的脚本之间没有执行顺序保证，哪个先加载完就先执行。
  • 如果希望脚本在 DOMContentLoaded 事件之前执行，可以将 async 放在 结束标签前。
示例

defer 属性

defer 表示延迟加载脚本直到文档解析完毕（DOMContentLoaded）。当 标签包含 defer 属性时：

  • 脚本同样异步下载，不会阻塞页面渲染。
  • 所有的 defer 脚本都会等到文档解析完成后，在DOMContentLoaded触发前再按它们在源代码中的顺序依次执行。（所以会阻塞DOMContentLoaded的触发）
  • 这意味着你可以依赖于前面的 defer 脚本来执行后续的脚本，保持了执行顺序的一致性。
示例

总结

  • 使用 async 更适合那些不影响页面初始渲染且相互间无依赖关系的脚本。
  • 使用 defer 更适合那些需要按照特定顺序执行的脚本，或者脚本依赖于完整的 DOM 树。

注意事项

  • 如果一个 标签同时包含 async 和 defer，大多数浏览器会忽略 async 并仅保留 defer 的效果。
  • 在使用 async 和 defer 时，确保脚本的逻辑能够处理非同步执行带来的影响，比如可能需要等待 DOM 元素可用才能操作它们。

通过合理利用这两个属性，可以显著改善网站的加载时间和用户体验。

声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。