What is the purpose of the "async" and "defer" attributes in script tags?

async 和 defer 属性都是用于控制 HTML 页面加载时脚本的行为的，它们都是 <script> 标签的属性。它们的主要目的是优化页面加载时间，但它们的工作方式略有不同。

async 属性

当您在 <script> 标签中使用 async 属性时，它会指示浏览器异步加载 JavaScript 文件。这意味着浏览器可以继续解析 HTML 页面的其余部分，而不需要等待该脚本完全加载和执行。一旦脚本文件加载完成，浏览器会中断页面解析来执行该脚本。

使用场景示例： 假设您有一个用于分析用户行为的第三方脚本，例如 Google Analytics。您可以使用 async 属性来加载这个脚本，因为它对初始页面加载的性能影响较小，并且其加载顺序对网站功能通常没有影响。

html
<script async src="https://www.google-analytics.com/analytics.js"></script>

defer 属性

使用 defer 属性时，脚本同样会被异步加载，但与 async 不同的是，脚本会在整个页面解析完成后，但在 DOMContentLoaded 事件触发之前，按照它们在文档中出现的顺序执行。

使用场景示例： 假设您的网页依赖于一个或多个 JavaScript 文件来正确渲染页面内容或功能（例如，使用 JavaScript 动态生成部分页面内容）。在这种情况下，使用 defer 属性将非常有用，因为它确保了脚本在整个页面都解析完毕后才执行，同时保持了脚本的执行顺序。

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

总结

• async：适用于那些不依赖于其他脚本且其他脚本也不依赖于它的独立脚本，如广告脚本或计数器。
• defer：适用于那些需要保证执行顺序，且必须等到整个页面解析完毕后才能执行的脚本，如依赖于 HTML 页面的脚本。

使用 async 和 defer 的选择取决于脚本与页面内容的关系以及脚本之间的依赖关系。