如何存储后台加载iFrame的JavaScript状态，避免3D viewer资源重复加载

你可以根据你的业务场景选择以下任意一种落地难度较低的方案，均不需要修改3D viewer的源码：

方案1：Service Worker全资源缓存（推荐） #

这是适用范围最广的方案，不管是同域还是跨域iframe都可以生效：

• 在你的站点主域注册Service Worker，配置拦截规则匹配3D viewer的所有静态资源请求（包括JS包、模型文件、纹理贴图、配置文件等）
• 针对这类资源使用CacheFirst缓存策略，首次加载时将资源全部存入浏览器Cache Storage，后续页面重载时，iframe的资源请求会直接被Service Worker拦截并返回本地缓存，仅首次访问需要等待2-3分钟，后续重载加载耗时可降低到秒级
• 若3D viewer资源有版本更新，你只需修改Service Worker的版本标识即可触发全量缓存更新

方案2：iframe持久化挂载 #

如果你的站点是单页应用（SPA）或可支持顶层DOM不卸载的架构，可直接采用该方案，完全保留viewer的运行状态：

• 将iframe挂载到页面顶层的固定DOM节点中，需要隐藏viewer时通过display: none或visibility: hidden控制显隐，不要从DOM中移除iframe节点
• 页面路由切换、局部刷新时都不会触发iframe重载，所有运行状态、渲染上下文都会完整保留，需要使用时直接修改样式显示即可
• 注意该方案会持续占用一定的内存和显存，需要根据用户设备的性能情况评估兼容性

方案3：状态序列化恢复（有限适用） #

仅适用于iframe和主站同域、或viewer支持跨域postMessage通信的场景：

• 页面卸载前，通过iframe.contentWindow访问viewer的运行上下文，将window下可序列化的全局状态、localStorage、sessionStorage、IndexedDB中存储的所有数据统一序列化后存入主站的IndexedDB中
• 页面重载加载iframe后，等iframe的初始DOM和JS执行完成，将之前存储的状态数据重新写回iframe对应的存储和全局对象中，可恢复大部分运行状态
• 注意该方案无法序列化WebGL上下文、WebWorker实例、闭包内部状态等不可结构化克隆的内容，如果viewer重度依赖这类能力，恢复后的状态可能存在异常

内容的提问来源于stack exchange，提问作者Leon Steinbach