defer和async都是用于异步加载脚本，这两个属性的主要区别在于它们如何处理脚本的解析、加载和执行与HTML文档的解析之间的关系。

defer

• 解析顺序：带有defer属性的脚本会随着文档的解析而下载，但是它们的执行会被推迟，直到文档解析完毕。
• 执行顺序：所有的defer脚本会按照它们在HTML文档中出现的顺序执行。
• 文档状态：defer脚本在文档的DOMContentLoaded事件触发前执行，这意味着它们可以在文档的交互发生之前执行，但HTML文档已经解析完成。
• 多脚本处理：如果有多个defer脚本，它们会保证按照在文档中出现的顺序执行，不会并行下载或执行。

async

• 解析顺序：带有async属性的脚本下载是异步的，并且一旦下载完成，解析和执行会立即开始，不会阻塞文档的解析。
• 执行顺序：async脚本的执行顺序不能保证，它们会在下载完成后尽快执行，可能会在文档解析完成之前执行。
• 文档状态：async脚本可以在文档的DOMContentLoaded事件触发之前的任何时间点执行，这取决于它们何时完成下载。
• 多脚本处理：多个async脚本可能会并行下载，并且它们的执行顺序是不确定的。

使用场景

• 当你需要确保脚本按照特定顺序执行，并且希望在文档解析完成后再执行脚本时，使用defer。
• 当你需要异步加载脚本，但不关心执行顺序，或者脚本是独立执行的，不依赖于其他脚本时，使用async。

示例

<!-- defer 示例 -->
<script defer src="script1.js"></script>
<script defer src="script2.js"></script>

<!-- async 示例 -->
<script async src="script1.js"></script>
<script async src="script2.js"></script>

注意事项

• 默认情况下，外部脚本（即引用外部文件的<script>标签）会阻塞页面的解析，直到脚本下载并执行完毕。这意味着在脚本下载和执行期间，页面的渲染会暂停。
• 内联脚本（即直接在HTML中编写的<script>标签内的JavaScript代码）不会阻塞页面解析，但它们的执行会暂停页面解析直到脚本执行完毕。
• 使用defer或async可以提高页面加载性能，因为它们允许浏览器更有效地加载和执行脚本，减少页面渲染的阻塞。

选择使用defer还是async取决于你的具体需求和脚本之间的依赖关系。