scripts-defer-async

defer vs async

defer 和 async 都是 HTML5 中的新特性，用于异步加载 JavaScript 文件。它们的主要区别在于加载时机和执行顺序。

defer：defer 属性用于指定脚本在文档解析和渲染过程中的执行时机。
具有 defer 属性的脚本会在文档解析完成后，但 DOM 构建完成之前执行。
这意味着脚本可以在 DOM 元素被创建之前运行，这对于某些需要操作 DOM 的脚本来说非常有用。
同时，由于 defer 脚本在 DOM 构建之前执行，它们不会影响页面的渲染速度。

async：async 属性用于指定脚本异步加载。
具有 async 属性的脚本会在页面加载时异步下载，并在下载完成后按照它们在 HTML 文件中出现的顺序执行。
这允许你将关键的 JavaScript 代码（如交互逻辑）放在页面的顶部，而将非关键的代码（如第三方库）异步加载，从而提高页面的加载速度。


PS: 通常将关键的 JavaScript 代码放在具有 defer 属性的 <script> 标签中，将非关键的代码放在具有 async 属性的 <script> 标签中。