在 Web 开发中，JavaScript 是不可或缺的一部分。而在加载 JavaScript 文件时，有两种常用的方案：直接在 HTML 文件中使用 <script> 标签加载 JavaScript 文件，或者使用模块化开发方式（如 CommonJS 或 ES6 模块化）。
在使用 <script> 标签加载 JavaScript 文件时，可以使用 defer 和 async 属性来控制脚本的加载方式。
defer 和 async 属性的作用
defer 和 async 属性都是用来控制脚本的加载方式的。它们可以让页面同时加载多个脚本，而不会像使用常规的脚本标签一样在下载完一个脚本后才去下载下一个脚本。
它们的主要区别在于，当浏览器下载完一个带有 defer 属性的脚本后，会暂停解析 HTML，执行该脚本，然后继续解析 HTML。而当浏览器下载完一个带有 async 属性的脚本后，则不会停止解析 HTML，而是会立即执行该脚本，然后继续解析 HTML。
defer 属性
当使用 defer 属性时，浏览器会在 HTML 解析完毕后，按照它们在 HTML 中的顺序，下载所有带有 defer 属性的脚本，并在页面 DOMContentLoaded 事件触发之前按照它们在 HTML 中的顺序执行它们。
注意，虽然下载的顺序是根据它们在 HTML 文件中出现的顺序，但是实际上下载和执行是并发的，因此不会阻塞页面的加载和渲染。
需要注意的是，defer 属性只有在脚本标签中的 src 属性存在时才生效。即使将 defer 属性应用于内联脚本（例如，<script defer>console.log('hello, world!')</script>），由于没有 src 属性，脚本也会立即执行，而不是被延迟执行。
async 属性
当使用 async 属性时，浏览器会立即下载带有 async 属性的脚本（即使还没有下载完前面的脚本），并在下载完成后立即执行该脚本。这意味着，如果不同的脚本文件之间互不依赖，可以使用 async 属性来优化加载时间，从而加快页面的加载速度。
需要注意的是，由于 async 属性会使脚本在下载完成后立即执行，因此脚本的执行顺序可能会与在 HTML 中出现的顺序不同。如果一个脚本依赖另一个脚本执行完成后才能执行，那么这两个脚本不能同时使用 async 属性。
推荐的使用方式
如何在这两个属性之间选择呢？一般来说，如果您的脚本文件之间存在依赖关系，那么就应该使用 defer 属性，以确保它们按照正确的顺序执行。而如果您的脚本文件之间互不依赖，就可以使用 async 属性来加速页面的加载速度。
另外，在优化页面加载性能时，还有一些其他的技术可以使用，例如：
- 将 JavaScript 代码移到页面底部，这样可以让其他文件更快地加载并显示。
- 将 JavaScript 代码压缩和缩小，以减少文件大小。
- 使用 CDN 来缓存 JavaScript 文件，从而加速其加载速度。
总之，defer 属性和 async 属性都是用来控制脚本加载方式的有用工具。使用它们可以加快页面的加载速度和提高用户体验。