script 标签中， async 和 defer 两个属性有什么用途?

在HTML的<script>标签中，async和defer两个属性都被用于控制脚本的加载和执行方式，但它们的行为有所不同。

1. async（异步）

   • 当在<script>标签中设置了async属性时，浏览器会在后台异步地加载和执行这个脚本，而不会阻塞文档的解析。这意味着脚本会在其加载完成后立即执行，而不会等待整个页面都加载完成。
   • 如果有多个异步脚本，浏览器会按照它们在HTML中出现的顺序进行加载，但是它们的执行顺序可能与加载完成的顺序不一致。这是因为每个脚本都在加载完成后立即执行，而不会等待其他脚本。
   • 需要注意的是，由于异步脚本的执行顺序可能不固定，因此它们不应该包含任何依赖于其他脚本或DOM元素的代码。

2. defer（延迟）

   • 当在<script>标签中设置了defer属性时，浏览器也会在后台加载这个脚本，但会等到整个页面都解析完成后才执行它。这意味着如果有多个延迟脚本，它们会按照在HTML中出现的顺序执行。
   • 延迟脚本的一个主要优点是，由于它们会等待整个页面都加载完成后再执行，因此你可以在这些脚本中安全地编写依赖于DOM的代码，因为你知道当脚本执行时，DOM已经完全准备好了。
   • 与异步脚本不同，延迟脚本的执行顺序是固定的，与它们在HTML中出现的顺序一致。

总结：

• async和defer都用于异步加载脚本，但它们的执行时机不同。
• async脚本在加载完成后立即执行，可能会阻塞其他脚本的执行（如果它们依赖于该脚本），并且不保证执行顺序。
• defer脚本会等待整个页面都加载完成后再执行，并且会按照在HTML中出现的顺序执行。这使得延迟脚本更适合包含依赖于DOM的代码。