脚本要操作DOM必须用defer，因其确保HTML解析完成、DOMContentLoaded触发前按序执行，document元素全部就位；async适用于无DOM依赖的独立脚本如统计上报；二者不可共存，同步脚本是性能雷区。
脚本要操作 DOM，必须用 defer
document.getElementById("app") 返回 null、addEventListener 报错、Vue/React 初始化失败——这些八成是因为脚本执行时 DOM 还没解析完。defer 能确保脚本在 HTML 解析完成、DOMContentLoaded 触发前执行，此时 document.body、document.head 全部可用，所有元素节点都已就位。
多个 defer 脚本严格按 HTML 中出现顺序执行，适合「库 + 业务」组合：
<script src="vue.js" defer></script><script src="app.js" defer></script>
注意：defer 只对带 src 的外部脚本生效；写成 <script defer>init();</script> 会被浏览器忽略，内联脚本不会延迟。
脚本只上报数据或加载广告，优先用 async
如果脚本里只有 navigator.sendBeacon、fetch 上报，没任何 document. 调用，也不依赖 lodash 或 jQuery，那就该用 async。它下载完立刻执行，不等 DOM，也不管其他脚本，越早跑越好。
立即学习“前端免费学习笔记（深入）”；
典型场景包括：
-
analytics.js（埋点统计） -
ads.js（第三方广告） -
error-tracking.js（错误上报）
多个 async 脚本谁先下完谁先跑，顺序不可控。别把主业务脚本（如 main.js）设为 async：体积大 + 执行慢 = 中断解析拖慢首屏。
async 和 defer 不能共存，浏览器只认 async
写成 <script async defer src="a.js"></script> 是无效的。规范明确：两者同时存在时，async 优先级更高，defer 被静默忽略。这不是 bug，是浏览器按标准执行的结果。
另外，Webpack/Vite 构建产物若已用 type="module"，再手动加 defer 实际无效——模块脚本默认具 defer 语义，加了也白加。
还有个边界容易被忽略：defer 只管外链脚本的执行时机，不管它内部的动态行为。即使加了 defer，如果脚本里用了 import()，后续模块的加载和执行仍不受约束，得靠代码自己兜底。
不加属性的 script 是性能雷区
<script src="x.js"></script> 默认是同步加载：HTML 解析立刻暂停，等 JS 下载、编译、执行完才继续。网络慢时白屏明显，首屏时间直接拉长。
除非是极小的内联 polyfill（比如检测 Promise 是否存在），否则所有外部脚本都应明确指定 defer 或 async。放在 <head> 里的同步脚本危害最大，尤其 SSR 场景下容易让首屏渲染卡住。
动态创建 script 标签（document.createElement('script')）是更可控的替代方案，适合按需加载或兼容 IE10 以下。但要注意：它默认行为类似 async，如需保序或等 DOM，得手动监听 DOMContentLoaded 或用 load 事件控制。
