首屏 iframe 必须用 data-src + intersectionobserver 实现懒加载，因 loading="lazy" 对首屏无效且被多浏览器忽略；需删 src、设占位样式、提前触发监听、及时卸载、复用节点并禁用 pointerevents。
首屏 iframe 不能写 src，写了就阻塞 HTML 解析——浏览器规范强制它立刻加载、等其 DOMContentLoaded 完成才继续解析后续 DOM，首屏渲染时间必然被拖长。
为什么加 loading="lazy" 对首屏 iframe 完全无效
这不是 bug，是浏览器行为规范：只要 <iframe></iframe> 元素在初始视口内（getBoundingClientRect().top ），无论是否加 <code>loading="lazy"，都会立刻发起请求并阻塞解析。你在 Network 面板看到的该 iframe 请求时间戳，一定早于主页面的 DOMContentLoaded。
- Safari 15.3 及更早、IE、多数安卓 WebView 直接忽略该属性，回退为 eager
- Firefox 截至 2026 年 6 月仍不支持
loading="lazy"对<iframe></iframe>的作用 - 父容器用了
overflow: hidden、transform或position: fixed，会干扰位置判断，懒加载逻辑直接跳过 -
src带随机参数（如?t=<math.random></math.random>）或服务端重定向，缓存失效，loading形同虚设
首屏 iframe 必须用 data-src + IntersectionObserver
这是目前唯一可控、可预测、能配合业务逻辑（如 tab 切换、滚动锚点）的方案。关键不是“用了 Observer”，而是初始化和清理是否严谨。
- HTML 中彻底删掉
src，只保留data-src和占位样式（如height: 400px; background: #f5f5f5;），防 CLS -
IntersectionObserver的rootMargin设为"0px 0px 300px 0px"，提前触发，避免用户刚看到边框才开始加载 - 回调中把
iframe.dataset.src赋给iframe.src后，必须立即调用observer.unobserve(iframe)，否则滚动来回会重复加载 - 务必监听
iframe.onload再更新状态；仅靠isIntersecting不代表内容已就绪
多 iframe 场景下必须复用节点，不能频繁创建销毁
监控大屏或大数据看板常见多个 tab 切换、轮播摄像头等场景，每次 remove() + appendChild() 新 iframe，等于反复 fork 渲染进程，内存无法回收，低端设备几分钟内就会白屏。
- 初始只保留一个
<iframe id="main-iframe"></iframe>，所有 tab 共用 - 切换时先
iframe.style.display = "none"，再改data-src并触发加载逻辑，加载完成前保持隐藏 - 已加载过的 iframe 加
data-loaded="true"，下次直接iframe.style.display = "block" - 若需跨域通信，优先用
postMessage，禁用pointerEvents由父页代理事件，避免坐标偏移
真正影响首屏的是初始 src 是否存在，而不是子页面本身快慢；哪怕 iframe 指向一个空 HTML，只要写了 src，它就卡住整个页面的 DOM 构建。动态控制生命周期这件事，没法取巧，必须从 HTML 结构层就切断同步加载链路。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
