script标签中defer和async的区别

script标签中的defer和async属性都是用于控制脚本加载和执行的方式，但它们之间有一些重要的区别。

1. 异步加载（async） ：

   • async属性告诉浏览器在解析HTML文档的过程中，当遇到带有async属性的script标签时，浏览器会暂停HTML文档的解析，然后异步地加载和执行脚本。这使得后续的HTML内容能够在脚本加载和执行期间继续解析，从而改善页面加载时间。
   • 需要注意的是，带有async属性的脚本的执行顺序是不确定的，也就是说它们可能会以任意顺序执行。因此，如果你有多个带有async属性的脚本，它们之间的代码可能会以任意顺序执行。
   • 在HTML文档解析完成后，浏览器会继续解析并下载异步加载的脚本，一旦下载完成，就会立即执行这些脚本。

2. 延迟加载（defer） ：

   • defer属性告诉浏览器在解析HTML文档的过程中，即使遇到带有defer属性的script标签，浏览器也会继续解析HTML文档，而不会暂停。
   • 带有defer属性的脚本会在整个HTML文档解析完成之后，且在DOMContentLoaded事件之前执行。这意味着，如果你的脚本依赖于DOM元素，那么使用defer属性可以确保这些脚本在DOM元素可用时执行。
   • 与async不同，带有defer属性的脚本的执行顺序是按照它们在HTML文档中出现的顺序进行的。也就是说，第一个带有defer属性的脚本会先执行，然后是第二个，依此类推。

总结一下：

• async和defer都可以用于异步加载脚本，但它们的执行时间和顺序有所不同。
• 使用async可以异步加载并执行脚本，但执行顺序不确定。这通常用于那些不依赖于DOM元素且可以并行加载的脚本。
• 使用defer可以延迟脚本的执行直到HTML文档解析完成，且保证脚本按照它们在HTML文档中出现的顺序执行。这通常用于那些需要依赖DOM元素的脚本。