返回

页面加载事件与脚本加载：async 和 defer

前端

在编写 Web 应用程序时，我们需要考虑页面加载性能。其中一个关键因素是优化脚本加载顺序，因为它会影响页面响应速度和用户体验。本文将探讨 async 和 defer 属性，它们可以帮助我们更有效地加载脚本。

理解页面加载事件

在浏览器加载页面时，它会触发一系列事件，包括：

  • DOMContentLoaded ：DOM 加载完成后触发，但图像和样式表等外部资源可能仍在加载中。
  • load ：当所有资源（包括图像、样式表和脚本）加载完成后触发。

脚本加载的传统方法

在传统的脚本加载方法中，所有脚本都在 <head> 标签内同步加载，这意味着浏览器会阻塞页面渲染，直到所有脚本加载完成。这可能会导致页面加载延迟，尤其是在脚本文件较大或需要长时间加载时。

async 和 defer 属性

async 和 defer 属性为我们提供了更灵活的方式来加载脚本：

  • async ：使用 async 属性，浏览器将异步加载脚本，这意味着它不会阻塞页面渲染。脚本将在加载完成后立即执行。
  • defer ：使用 defer 属性，浏览器将延迟加载脚本，直到 DOM 加载完成。与 async 不同，defer 加载的脚本将按顺序执行。

选择 async 还是 defer

在选择 async 还是 defer 时，需要考虑以下因素：

  • 脚本依赖关系 ：如果脚本之间存在依赖关系，应使用 defer 以确保脚本按顺序加载。
  • 脚本大小 ：较大的脚本应使用 async 以避免阻塞页面渲染。
  • 执行顺序 ：如果脚本执行顺序至关重要，应使用 defer 以按顺序执行脚本。

示例

使用 async

<script src="async-script.js" async></script>

使用 defer

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

性能优势

使用 async 和 defer 属性可以带来以下性能优势：

  • 减少页面加载时间 ：异步加载脚本可以防止脚本阻塞页面渲染，从而提高页面响应速度。
  • 提高用户体验 ：更快的页面加载时间会改善用户体验，因为用户不必等待页面完全加载才能与之交互。
  • 节省带宽 ：按需加载脚本可以减少不必要的下载，从而节省带宽。

注意事项

  • async 脚本可能会在 DOMContentLoaded 事件触发之前执行。这可能会导致 DOM 节点不可用，从而引发错误。
  • defer 脚本将在 DOMContentLoaded 事件触发后执行。这对于需要操纵 DOM 的脚本可能是个问题。

总结

async 和 defer 属性提供了在不牺牲脚本功能的情况下优化脚本加载顺序的有效方法。通过仔细考虑脚本依赖关系、脚本大小和执行顺序，您可以选择最适合您应用程序的属性，从而提高页面加载性能并改善用户体验。