首屏 iframe 必须用 data-src + intersectionobserver 控制加载，因 loading="lazy" 对其完全无效且浏览器强制同步加载；需显式设置宽高防 cls，复用 iframe 避免频繁创建销毁，并通过 sandbox + postmessage 安全通信。
监控大屏里用 iframe 分屏，不是不能用，而是默认写法会直接拖垮帧率、卡死主线程、吃光内存——尤其当同时加载 4~6 个视频流或图表页时，window.onload 被阻塞、document.readyState 卡在 interactive、低端设备白屏是常态。
为什么监控大屏的 iframe 一放就卡
根本原因不是“iframe 慢”，而是浏览器强制同步加载：只要 HTML 里写了 src，不管它在不在视口、是不是视频页，解析器立刻发起请求，并等其 DOMContentLoaded 完成才继续。实测中，一个未优化的萤石云监控页 iframe 可让主页面首屏延迟 4.2 秒以上。
-
src带时间戳参数（如?t=1718648500）导致缓存失效，每次都是全量重载 - 多个 iframe 共享连接池，资源请求排队，DNS + TCP + TLS 握手叠加阻塞
- 每个 iframe 默认独占渲染进程，Chrome DevTools 的 Memory 面板里能看到多个
Document实例，3 个 iframe 就比单页多占 40%+ JSHeap - 同源 iframe 内若运行 LiveCharts 或 ECharts，未做数据分片或销毁，事件监听器和 DOM 节点持续泄漏
必须用 data-src + IntersectionObserver 控制首屏 iframe
loading="lazy" 对首屏 iframe 完全无效，规范强制 eager 加载；IE 和 Safari 15.3 及更早版本也直接忽略该属性。真正可控的方案是彻底移除初始 src，靠 JS 主动触发。
- HTML 中只写
<iframe width="100%" height="600"></iframe>，加占位背景色防 CLS -
IntersectionObserver的rootMargin设为"0px 0px 400px 0px"，提前 400px 触发，避免用户看到边框才开始加载 - 回调中赋值
iframe.src = iframe.dataset.src后，**立即执行observer.unobserve(iframe)**，否则滚动来回会重复加载 - 监听
iframe.onload（不是onerror，后者对网络失败基本不触发），成功后再显示内容、隐藏 skeleton
多 tab 切换场景下 iframe 必须复用，禁止频繁创建/销毁
监控大屏常见“左列表右详情”或“多摄像头轮播”，每次切 tab 都 remove() + appendChild() 新 iframe，等于反复 fork 渲染进程，内存无法回收，低端 Android 设备 2 分钟内必白屏。
- 初始只保留一个
<iframe id="main-iframe"></iframe>，所有 tab 共用 - 切换时先
iframe.style.display = "none"，再改data-src并触发加载逻辑，加载完成前保持隐藏 - 已加载过的 iframe 标记
data-loaded="true"，下次直接display: block，跳过重新加载 - 若 iframe 内是 Vue/React 应用，确保其卸载钩子（
beforeUnmount/componentWillUnmount）被调用，清理定时器和addEventListener
跨域监控页（如萤石云）必须用 sandbox + postMessage 通信
直接 src="https://h5.ezvizlife.com/xxx" 不仅无法调试，还可能因服务端 X-Frame-Options 或 CSP 策略被拒，报错 Blocked a frame with origin。安全与可用性必须兼顾。
- 加上
sandbox="allow-scripts allow-same-origin allow-popups"，禁用插件、表单提交等高危能力 - 通信只走
window.postMessage，且 **必须校验event.origin**，拒绝非预期域名消息 - 主页面发消息前，先用
iframe.contentWindow是否存在 +iframe.contentDocument?.readyState === "complete"做双重判断，避免SecurityError - 不要依赖
iframe.onload判断跨域页是否就绪——它只表示标签加载完成，不保证内部 JS 执行完毕
最易被忽略的一点：所有 iframe 的 width 和 height 必须显式声明（CSS 或 HTML 属性），否则加载瞬间触发 CLS，直接影响 Core Web Vitals 评分；而监控大屏往往要求全屏自适应，这时得用 aspect-ratio 或 JS 动态计算，不能留空。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
