含多个iframe的页面加载缓慢且报service worker预加载错误如何优化

• 按需动态加载iframe：不要在页面初始化时就渲染全部20个iframe，仅在对应模态框的打开事件触发时，才动态创建iframe节点插入模态框容器，模态框关闭时立即移除iframe节点或清空src属性，避免后台持续占用网络和渲染资源。
• 缩略图占位替换：初始状态模态框内仅展示对应YouTube视频的封面缩略图+播放按钮浮层，用户点击播放按钮时再加载真实iframe，页面初始阶段完全没有iframe相关的资源请求，加载速度提升最明显。
• 复用单个iframe容器：全页面仅维护1个公共iframe节点，打开不同模态框时仅替换iframe的视频ID参数，关闭模态框时清空src，全程最多只存在1个iframe的资源占用，远低于20个独立iframe的开销。
• 给iframe添加原生懒加载属性：加载iframe时添加loading="lazy"属性，由浏览器自动管控加载优先级，进一步降低非关键资源对页面首屏速度的影响。

报错翻译 #

The service worker navigation preload request was cancelled before 'preloadResponse' settled. If you intend to use 'preloadResponse', use waitUntil() or respondWith() to wait for the promise to settle.
翻译：Service Worker导航预加载请求在preloadResponse状态敲定前就被取消。如果你需要使用preloadResponse能力，请调用waitUntil()或respondWith()方法等待对应Promise执行完成。

修复方案 #

• 若你不需要使用Service Worker的导航预加载功能，直接在Service Worker注册逻辑中关闭该配置，设置navigationPreload: false即可直接消除报错。
• 若你确实需要使用预加载能力，在fetch事件回调中，要将preloadResponse相关的逻辑包裹在event.waitUntil()中，或是直接通过event.respondWith()处理返回的Promise，避免请求在异步逻辑执行完成前被浏览器销毁。
• 若你使用第三方PWA框架自动生成Service Worker代码，可直接检查框架的预加载配置开关，关闭非必要的预加载项，或是升级框架到最新稳定版修复官方内置的逻辑缺陷。

内容的提问来源于stack exchange，提问作者Petya Yaneva