考察点：脚本加载顺序、执行时机、DOM 依赖
这两个属性都是为了解决 <script> 标签阻塞 HTML 解析的问题，但它们的执行时机不同，适用场景也不同。
async（异步）：
脚本会异步下载，下载完成后立即执行。它不保证执行顺序，也不保证在 DOMContentLoaded 之前还是之后执行。
适用场景：独立的第三方脚本，比如 Google Analytics、广告脚本，它们不依赖 DOM，也不被其他脚本依赖。
defer（延迟）：
脚本也会异步下载，但会等到整个 HTML 文档解析完成之后，且在 DOMContentLoaded 事件触发之前，按照它们在文档中出现的顺序依次执行。
适用场景：依赖于 DOM 结构的业务逻辑脚本，或者模块之间有依赖关系的脚本。
如果在项目中我需要确保我的 JS 代码能在 DOM 就绪后安全运行，且保持代码顺序，我会首选 defer。这也是目前主流框架（如 Vue/React 打包后的入口文件）推荐的加载方式。