本文详解 onesignal 等 sdk 采用的“延迟队列模式”（deferred pattern），通过预定义 window 全局数组缓冲调用，待主 sdk 加载完成后再批量执行初始化逻辑，从而解决 defer 脚本执行时机早于依赖脚本的问题。
本文详解 onesignal 等 sdk 采用的“延迟队列模式”（deferred pattern），通过预定义 window 全局数组缓冲调用，待主 sdk 加载完成后再批量执行初始化逻辑，从而解决 defer 脚本执行时机早于依赖脚本的问题。
在现代 Web 应用中，为优化首屏性能，常将第三方 SDK（如 OneSignal、Google Analytics）以 <script defer> 方式加载。但 defer 仅保证脚本按顺序执行、且在 DOM 解析完成后运行——并不保证其依赖的其他脚本（如动态插入的 SDK 主体）已就绪。你遇到的问题正是典型时序陷阱：StackOverflowDeferred 在 StackOverflowSDK.page.js 执行前被初始化为 []，而后者又试图覆盖 window.StackOverflowDeferred 为 StackClass；但由于 defer 脚本的执行顺序和动态插入脚本的异步加载不可控，覆盖操作往往晚于你的 console.log，导致读取到空数组。
✅ 正确解法：实现 Deferred 队列模式
核心思想是：让 window.XXXDeferred 始终是一个具备 .push() 方法的对象，无论 SDK 是否加载完成。初始化阶段它是一个普通数组（用于暂存调用），加载完成后则升级为功能完整的 SDK 实例，并自动执行所有暂存操作。
以下是可直接落地的实现方案：
1. 页面底部嵌入（保持 defer 顺序）
<script src="./StackOverflowSDK.page.js" defer></script>
<script>
// ✅ 安全初始化：始终返回一个支持 push 的对象
window.StackOverflowDeferred = window.StackOverflowDeferred || [];
// 可立即调用，无需等待 SDK 加载
StackOverflowDeferred.push(function(Stack) {
Stack.init({ debug: true });
});
</script>2. StackOverflowSDK.page.js（负责动态加载主 SDK）
(() => {
'use strict';
function loadMainSDK(version) {
const script = document.createElement('script');
script.defer = true;
script.src = `http://localhost/StackOverflow/StackOverflowSDK.page.es6.js?v=${version}`;
document.head.appendChild(script);
}
loadMainSDK(10001);
})();3. StackOverflowSDK.page.es6.js（主 SDK，含 Deferred 升级逻辑）
(() => {
class StackClass {
constructor(pendingCalls = []) {
// ✅ 关键：构造时立即执行所有暂存的回调
pendingCalls.forEach(callback => {
if (typeof callback === 'function') {
callback(this);
}
});
}
static init(options) {
console.log('StackClass initialized with:', options);
// 实际初始化逻辑...
}
// 可扩展其他方法（如 register, on, send 等）
}
// ✅ 关键：用新实例覆盖 window 变量，并传入原始 pending 数组
// 此时 window.StackOverflowDeferred 已从 [] 升级为功能完整的 StackClass 实例
window.StackOverflowDeferred = new StackClass(window.StackOverflowDeferred);
})();⚠️ 注意事项与最佳实践
- 不要覆盖为类本身：原问题中 window.StackOverflowDeferred = StackClass 是错误的——这会让 push() 调用失败（类不是函数）。必须实例化后赋值。
- 确保 push 兼容性：若需保留数组 API（如 length, forEach），可继承 Array 或手动代理方法，但对大多数 SDK 场景，仅实现 push 已足够。
- 避免竞态条件：动态插入的脚本（如 StackOverflowSDK.page.es6.js）应使用 defer 或监听 load 事件确保执行顺序，而非依赖 document.write 或同步 fetch+eval。
- 调试技巧：在 StackClass 构造函数中打印 pendingCalls.length，可直观验证队列是否被正确消费。
该模式已被 Google Analytics、Hotjar、Clarity 等主流工具验证，兼顾了性能（defer 加载）、可靠性（无执行时序依赖）与开发者体验（API 一致）。只要遵循“先声明队列、后升级实例”的原则，即可彻底规避 undefined 或空数组问题。
