请简述 HTML 中 `<script>` 标签的 `defer` 和 `async` 属性的区别。

答题要点

在 HTML 中，`<script>` 标签的 `defer` 和 `async` 属性都用于控制脚本的加载和执行，它们的主要区别如下：首先，`defer` 属性表示脚本会在文档解析完成后、`DOMContentLoaded` 事件触发前执行。这意味着脚本会按照在文档中出现的顺序依次执行，不会阻塞文档的解析，适合那些需要在文档解析完成后才执行的脚本，比如操作 DOM 的脚本。例如，当一个 HTML 页面有多个带有 `defer` 属性的脚本时，它们会依次执行。其次，`async` 属性表示脚本会异步加载，加载完成后立即执行。脚本的执行顺序是不确定的，可能会打乱文档中脚本的顺序，并且可能会在文档解析过程中执行，可能会阻塞文档的渲染。例如，当页面中有多个带有 `async` 属性的脚本时，哪个脚本先加载完成就先执行哪个。总的来说，`defer` 保证脚本按顺序执行且在文档解析完成后执行，`async` 则强调异步加载和立即执行，不保证执行顺序。