绝大多数第三方统计脚本（如gtag.js、umami.js、sentry-browser）应使用async——因其不依赖DOM、不操作document.body、仅采集上报，async可实现下载不阻塞且尽早初始化；但若提前配置dataLayer或启用tracing等需DOM就绪的场景，须改用defer或内联配置，并配合preconnect、crossorigin、超时控制与错误降级。
第三方统计脚本（如 Google Analytics、Umami、Sentry）不该同步阻塞页面解析，延迟加载的核心不是“等用户滚动”，而是“不抢主线程、不卡 DOM 构建、不拖慢首屏”。直接用 async 或 defer 就能解决大部分问题，但选错属性或忽略配套措施，反而会让埋点失效或白屏。
第三方统计脚本该用 async 还是 defer？
绝大多数统计脚本（gtag.js、analytics.js、umami.js、sentry-browser）适合 async——前提是它不读写 DOM、不依赖其他 JS、也不需要操作 document.body。
原因很简单：这类脚本只做数据采集和上报，越早初始化越好；async 下载不阻塞、执行时机自由，且现代 SDK 都已适配无 DOM 环境（例如用 navigationStart 替代 DOMContentLoaded 时间戳）。
但要注意这些例外：
- 如果你在
dataLayer或window.sentryConfig中提前写了配置，而统计脚本是async加载的，它可能在配置前就执行——这时得把配置内联在脚本标签前，或改用defer并确保顺序 -
Sentry.init()若启用了tracing且需自动拦截 XHR/fetch，部分版本建议defer以确保 DOM 和全局对象就绪 - 任何调用
document.write()的老版统计脚本（如某些广告联盟埋点）必须禁用——现代浏览器执行即清空文档流，直接白屏
为什么加了 async 还是卡 DNS 或 TLS？
加了 async 只解决“执行阻塞”，不解决“连接阻塞”。统计脚本首次请求常卡在 domainLookupStart 到 connectStart 这一段——浏览器还没拿到 IP，更别说下载 JS 了。
这时候 async 再快也没用。必须配合 ：
- 放在
最顶部，不能在 CSS 或字体之后 - 协议、域名必须完全匹配：
https://www.googletagmanager.com和https://googletagmanager.com是两个不同 origin，后者不会复用前者连接 - 跨域资源必须加
crossorigin属性，否则 preconnect 被忽略：<script src="https://cdn.example.com/analytics.js" crossorigin></script> - 若
domainLookupStart返回0，说明目标服务端没配Timing-Allow-Origin: *，字段不可信，只能靠 preconnect 补救
动态加载统计脚本时怎么防挂死？
有些场景（如 GDPR 同意后才加载、A/B 测试分组控制）必须用 JS 动态插入脚本。此时不能裸写 document.createElement("script")，得加超时与降级：
- 用
AbortSignal.timeout(3000)控制 fetch 加载 bundle 的最大等待时间，避免阻塞主线程 - 动态创建
<script></script>标签时，显式设置script.async = true（即使你写的是script.setAttribute("async", "")，也得再赋值一次，部分旧版 Safari 对 setAttribute 不敏感） - 监听
script.onerror做 fallback：比如加载失败时打点到本地日志，或切换为轻量版（umami.min.js替代完整版） - 避免在
load事件里动态加载——此时首屏早已渲染完毕，但用户交互可能已触发事件，造成漏埋
怎么验证延迟加载真起效了？
别只看 Network 面板里脚本是否“async”显示。关键验证点有三个：
- 打开 Performance 面板录制，检查
DOMContentLoaded是否明显提前（对比未优化版本），且没有长任务卡在脚本下载阶段 - 用
PerformanceObserver捕获resource条目，过滤出统计脚本 URL，确认domainLookupEnd - domainLookupStart 、connectEnd - connectStart - 手动禁用 JS 后刷新，观察页面结构是否仍完整渲染——如果禁 JS 后白屏或布局错乱，说明脚本里有
document.write()或同步 DOM 注入，必须重构或隔离
最易被忽略的是：统计脚本的“延迟”不是指它晚加载，而是指它不干扰页面核心路径。哪怕它 100ms 就加载完，若卡在 DNS 查询上，照样拉垮 LCP。优化重点永远在连接层，不在执行层。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
