不一定；async仅确保下载不阻塞html解析，但执行时会中断dom构建、不保序、不可控，仅适用于完全独立、无dom依赖的脚本（如统计、广告sdk）。
script 标签加 async 就一定能提升首屏速度？
不一定。加了 async 只是让脚本下载不阻塞 HTML 解析，但执行时机不可控——它一旦下载完就立即执行，可能打断 DOM 构建、触发重排，甚至覆盖还没初始化的全局变量。尤其当多个 async 脚本之间有依赖（比如先加载 jQuery，再加载插件），顺序无法保证，ReferenceError 很常见。
适用场景很明确：独立、无依赖、不操作 DOM 或不修改 window 上关键状态的脚本，比如统计埋点、广告 SDK、错误监控上报。
- ✅ 推荐：
<script async src="analytics.js"></script> - ❌ 避免：
<script async src="jquery.js"></script><script async src="plugin.js"></script>（执行顺序不确定） - ⚠️ 注意：
async对内联脚本无效，只对带src的外部脚本起作用
async 和 defer 到底该选哪个？
核心区别在执行时机：async 是“下载完立刻执行”，defer 是“等 HTML 解析完、DOMContentLoaded 之前按顺序执行”。如果你的脚本需要访问完整 DOM（比如 document.getElementById），又不想阻塞渲染，defer 更稳妥。
- 用
async：脚本完全自包含，不依赖 DOM，也不被其他脚本依赖（如hotjar.js） - 用
defer：脚本需读取或修改 DOM，且存在多个、有执行顺序要求（如框架 + 初始化逻辑） - 两者都设时，
async优先级更高，defer会被忽略 -
defer不支持动态插入的 script（document.createElement('script')），而async支持
动态插入 script 时如何模拟 async 行为？
通过 JS 动态创建 <script></script>，默认就是异步行为（类似 async），但要注意：必须在设置 src 后再 append 到 document，否则部分浏览器会同步执行。
const s = document.createElement('script');
s.src = 'https://cdn.example.com/widget.js';
// ✅ 正确：先设 src，再 append
document.head.appendChild(s);
// ❌ 错误：append 后再设 src，某些环境仍会阻塞
- 动态 script 默认等效于
async=true，无需额外设async属性 - 若需确保顺序（类似
defer），得手动监听load事件链式加载 - 注意 CSP 策略：动态插入可能被
script-src拒绝，需显式允许域名
Chrome DevTools 里怎么验证 async 是否生效？
打开 Network → Filter 输入 script，看目标 JS 请求的 “Initiator” 列是否为 parser（说明是 HTML 解析器触发，非 JS 动态插入）；再切到 Performance 面板录制一次页面加载，检查 Main 线程上 script 执行是否穿插在 HTML 解析长任务中 —— 如果执行时间点紧贴下载完成、且打断了解析条（Parse HTML），说明 async 生效了，但也可能造成 layout thrashing。
- 关键指标：对比开启/关闭
async时的FCP和DOMContentLoad时间差 - 容易被忽略：即使
async加载快，如果脚本内部执行耗时 > 50ms，仍会卡住主线程，影响交互响应 - 真机调试更准：桌面 Chrome 的网络限速模拟不如真实弱网环境暴露问题
async 不是性能银弹。真正影响首屏的是脚本执行逻辑本身，而不是加载方式。很多团队加了 async 却没动内部代码，结果只是把阻塞从“加载阶段”挪到了“执行阶段”。
