HTML文档第三方统计脚本加载失败超时降级机制

• 使用 setTimeout 与 Promise.race 组合封装加载流程，避免手动维护状态标志，使代码更加简洁清晰。
• 超时后，应立即移除尚未加载完成的 script 元素。否则，该元素可能在后续某个时刻突然加载成功并执行，造成重复执行，进而引发更复杂的问题。
• 降级过程中切勿使用 document.write，该方法会清空整个页面。建议改用 console.warn 记录日志，或写入一个隐藏的 div 来承载信息。

安全替换备用统计脚本的方法

降级并非简单地更换 URL 就能解决。直接替换 src 存在较高风险，原脚本可能带来各种副作用，如同步阻塞、document.write、修改全局变量、覆盖已有 SDK 实例等。

更可控的做法是只加载一个最小化的骨架脚本。例如，其中仅包含一个 console.log 或空函数定义。然后通过动态 fetch 结合 eval（需谨慎使用）或预置的函数桩来模拟核心 API。

• 备用脚本仅暴露 window.ga、window.sentry 等同名对象，但方法体为空，或将其数据打点到 localStorage 中。
• 如果需要上报，改用 navigator.sendBeacon 发送轻量日志，从而不再依赖第三方 SDK。
• 注意，在降级路径中，应避免再次调用 document.createElement('script')，以防止触发重复加载的竞争条件。

async 脚本与 defer 脚本的降级时机差异

async 脚本一旦下载完成便会立即执行，可能打断 DOM 构建过程；而 defer 脚本会排队等待，直到 DOMContentLoaded 事件触发前才执行。这意味着超时降级逻辑必须在它们不同的生命周期中合理插入。

对于 async 脚本，降级检查应在 script 元素创建后立即启动，无需等到插入 head 完成。对于 defer 脚本，可延迟到 document.readyState === 'interactive' 后再启动计时器，这样能有效避免误判断。

• 使用 performance.now() 记录脚本创建时间，超时计算应基于该起点，而非页面开始加载的时间。
• 不要监听 document.addEventListener('DOMContentLoaded', ...) 来触发降级检查，因为该事件本身可能被其他脚本阻塞。
• 当存在多个统计脚本时，每个脚本都应拥有独立的超时控制，避免因一个脚本失败而影响其他脚本的加载。

CDN 故障时回退到本地压缩版本的常见陷阱

“CDN 失败了，就切到本地版本”——这个方案看似稳妥，但实际执行中，常因路径、SRI（子资源完整性）和 MIME 类型这三重校验问题而导致二次崩溃。浏览器对本地 file:// 或内联 blob URL 的模块解析规则与 CDN 完全不同。

真正可行的回退方案是：提前将最小化的统计桩内联到页面中。使用 try/catch 包裹所有外部调用，并在超时后激活这个内联桩。

• 内联脚本需要添加 type="application/json" 或用注释包裹，避免被早期解析器误执行。
• 不要使用 import 加载本地回退脚本，因为 type="module" 对相对路径极其敏感，本地开发服务器经常返回 404 错误。
• 如果使用了 Service Worker，回退应走 caches.match() 而非 fetch()，否则仍可能触发网络超时。

最后，还有一个容易被忽略的要点：超时阈值不应写死。真实场景下，3G、4G、5G 网络的合理超时值可相差 3 倍以上。建议结合 navigator.connection.effectiveType 动态调整。不过，该 API 在 iOS Safari 上支持有限，因此必须准备兜底方案。