iframe无法用预加载，因规范不支持as="iframe"；有效方案是创建隐藏iframe提前加载并缓存，复用时直接插入dom；loading="lazy"仅对静态iframe生效且兼容性差。
iframe 本身不支持 rel="preload"，直接写 <link rel="preload" as="iframe"> 无效，浏览器会忽略。真正可行的预加载，必须绕过 iframe 标签限制，用“隐藏 iframe + 缓存复用”实现。
为什么不能用 <link rel="preload"> 预加载 iframe
浏览器规范里根本没有 as="iframe" 这个取值；<link rel="preload"> 只支持 script、style、font、image、video 等明确资源类型。iframe 是一个**文档容器**，不是可下载的单一资源，它的加载过程包含 DNS、TCP、TLS、HTML 解析、子资源请求等完整生命周期，无法被 preload 提前触发。
常见错误现象：<link rel="preload" href="page.html" as="iframe"> 在 Network 面板里完全不会发出请求，控制台可能报 warning：“Invalid as value 'iframe'”。
真正有效的预加载：用隐藏 <iframe></iframe> 提前拉取并缓存
核心思路是：在用户还没点击/切换前，用一个不可见的 iframe（display: none 或 visibility: hidden）提前加载目标页面，等真正需要展示时，直接复用已加载完成的 DOM 实例，跳过整个网络和解析阶段。
- 初始 HTML 中不写任何首屏外的 iframe，只保留占位容器（如
<div id="tab-content"></div>） - 首屏渲染完成后，用 JS 创建隐藏 iframe：
const preloadIframe = document.createElement('iframe');，设置preloadIframe.src = 'target.html'，并插入到document.body（但不显示） - 监听
preloadIframe.onload，加载完成后标记为cached，并保存引用（不要 remove，否则缓存失效） - 用户切换 tab 时，不再
setAttribute('src', ...)，而是把已加载的 iframe 元素appendChild到目标容器，或直接show() - 务必避免重复创建——每个 URL 对应唯一一个预加载 iframe 实例，用 Map 缓存：
preloadCache.set(url, iframe)
配合 loading="lazy" 的边界条件必须满足
如果你只是想让非首屏 iframe 延迟加载（而非主动预加载），loading="lazy" 能省事，但它生效极其苛刻：
- iframe 必须在 HTML 中静态写出，不能 JS 动态
innerHTML += '<iframe ...>'</iframe> -
src不能带随机参数（如?t=1724601723），否则浏览器拒绝缓存，lazy失效 - 响应头必须含
Cache-Control: public, max-age=3600，且不能是no-cache或no-store - 元素初始
offsetTop要明显大于视口高度（建议 >2 * window.innerHeight），否则 Safari/Chrome 强制 eager 加载 - 必须显式设置
width和height（或 CSSaspect-ratio），否则加载瞬间触发 CLS - Firefox 当前（2026）仍完全不支持 iframe 的
loading="lazy"，写了等于没写
首屏必需 iframe 的加载控制必须用 data-src + IntersectionObserver
首屏内又必须立刻显示的 iframe，loading="lazy" 不仅无效，还会因浏览器强制 eager 加载而加重阻塞。此时唯一可控方案是彻底剥离初始 src：
- HTML 中只写：
<iframe title="主面板" style="width:100%; height:500px; background:#f9f9f9;"></iframe> - JS 初始化
IntersectionObserver，rootMargin设为"0px 0px 300px 0px"（提前 300px 触发） - 回调中检查
!iframe.hasAttribute('src')，再赋值iframe.src = iframe.dataset.src - 赋值后立即
observer.unobserve(iframe)，防止滚动反复触发 - 必须监听
iframe.onload才能认为框架文档加载完成；但注意：这不代表内部 JS 已执行，如需通信，嵌入页需主动postMessage('ready')
最易被忽略的一点：预加载的隐藏 iframe 如果没加 allow、sandbox 等属性，后续复用时可能因策略不一致导致跨域脚本执行失败；所有预加载 iframe 的属性（包括 referrerpolicy、csp）必须与正式使用的完全一致。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
