iframe 在隐藏状态下加载大型 Godot Web 游戏时，会因主线程被长时间占用而阻塞父页面的全部用户交互（如点击、输入等），即使 iframe 被设为 display: none 也无法避免；根本原因在于 iframe 与主页面共享同一浏览器 UI 线程。
iframe 在隐藏状态下加载大型 godot web 游戏时，会因主线程被长时间占用而阻塞父页面的全部用户交互（如点击、输入等），即使 iframe 被设为 `display: none` 也无法避免；根本原因在于 iframe 与主页面共享同一浏览器 ui 线程。
在 Web 环境中，iframe 并非“完全隔离”的沙箱——尽管它拥有独立的 DOM 和执行上下文，但其 JavaScript 仍运行在与父页面相同的浏览器主线程上。这意味着：当 Godot 导出的 WebAssembly 模块初始化、大量资产解压、脚本解析或首帧渲染等密集任务集中执行时，主线程会被持续占用，导致父页面事件循环停滞，按钮无法响应、表单无法输入、动画卡顿——哪怕 iframe 自身不可见。
单纯使用 display: none 或 visibility: hidden 无法缓解该问题，因为隐藏仅影响渲染输出，不暂停 JS 执行。同样，Web Workers 虽可将计算移出主线程，但 Godot 官方 Web 导出目前不支持 Worker 模式（Module.instantiateWasm 依赖同步环境，且核心引擎未适配跨线程通信），强行修改生成的 godot.js 或 wasm 加载逻辑风险高、维护困难，不推荐。
✅ 可行方案：主动让渡主线程控制权
核心思路是将 Godot 启动流程拆分为微任务片段（microtasks）或宏任务（macrotasks），在关键耗时操作之间插入 setTimeout(fn, 0) 或 requestAnimationFrame(fn)，使浏览器有机会调度父页面的事件处理。
例如，在 Godot 导出的 HTML 模板中（通常为 index.html），找到 Godot 初始化入口（如 runEngine() 或 Module.onRuntimeInitialized 回调），对初始化步骤进行分片：
<script>
// 假设这是 Godot 初始化前的包装逻辑
function startGodotGradually() {
const iframe = document.getElementById('godot-frame');
// 第一阶段：设置 iframe src，但暂不触发自动执行
iframe.src = 'game.html?deferred=true';
// 第二阶段：延迟启动，给 survey 表单留出响应窗口
setTimeout(() => {
// 触发 iframe 内部的渐进式初始化（需在 game.html 中配合实现）
const iframeWin = iframe.contentWindow;
if (iframeWin && iframeWin.startGodotStepByStep) {
iframeWin.startGodotStepByStep();
}
}, 100);
}
// 在 survey 提交后调用
document.getElementById('survey-form').addEventListener('submit', () => {
startGodotGradually();
});
</script>
同时，在 game.html（iframe 内容页）中，将 Godot 启动逻辑解耦为多阶段：
// game.html 内部 —— 实现分步初始化
window.startGodotStepByStep = function() {
// Step 1: 预加载关键 wasm 模块（轻量）
setTimeout(() => {
console.log('Step 1: Loading WASM stub...');
// 此处可触发 Module.loadWasm() 的轻量预热
}, 0);
// Step 2: 解析配置 & 初始化基础 Runtime
setTimeout(() => {
console.log('Step 2: Initializing runtime...');
// 替换原生 Module.onRuntimeInitialized 为受控流程
}, 50);
// Step 3: 异步加载纹理/音频资源（使用 fetch + Promise.all）
setTimeout(() => {
console.log('Step 3: Preloading assets...');
preloadAssets().then(() => {
console.log('Assets preloaded — ready for seamless switch');
// 此时可通知父页面：“已就绪”，切换显示 iframe
parent.postMessage('godot-ready', '*');
});
}, 100);
};
⚠️ 关键注意事项：
- 所有
setTimeout(..., 0)实际被调度为下一轮事件循环，确保父页面 UI 线程得以喘息；requestAnimationFrame更适合与视觉更新协同，但 Godot 启动初期无渲染需求，优先用setTimeout。 - 避免在单个函数中执行 >16ms 的同步操作（即超过一帧时间），否则仍会引发可见卡顿。可通过
performance.now()插入断点检测耗时。 - 若使用 Godot 4.2+，可尝试启用实验性
--threading构建选项（需编译自定义导出模板），但生产环境稳定性需充分验证。 - 最终体验优化建议：在 survey 结束后，先
iframe.style.display = 'block'并立即.focus()，再通过postMessage触发 iframe 内resumeGame()，实现视觉与交互的零延迟衔接。
通过将重负载“切片”并主动让出控制权，你无需修改 Godot 底层代码，即可在保持现有架构的同时，真正实现 survey 与游戏加载的并行无感体验。
