首屏 iframe 不能加 loading="lazy"，浏览器会强制立即加载并阻塞 dom 解析；必须用 data-src + intersectionobserver 精准控制，初始化删 src、设占位样式、rootmargin 提前触发、加载后立即 unobserve 并监听 onload。
首屏 iframe 不能加 loading="lazy"
写了 loading="lazy" 也没用，浏览器会强制立即加载并阻塞 DOM 解析。这不是兼容性问题，而是 HTML 规范明确要求：只要 <iframe></iframe> 在初始视口内（哪怕只露出 1px），解析器就会立刻发起请求，并等到它的 DOMContentLoaded 完成才继续解析后续 HTML。
常见误操作包括：
- 在首屏 HTML 中直接写
<iframe src="dashboard.html" loading="lazy"></iframe>——loading被完全忽略 - 父容器用了
overflow: hidden或transform—— 浏览器无法准确计算位置，懒加载逻辑直接跳过 - 在微信 iOS 内置浏览器或旧版安卓 WebView 中使用 —— 属性不被识别，回退为 eager
-
src带时间戳参数如?t=1712345678—— 缓存失效，每次都是新请求，loading形同虚设
必须用 data-src + IntersectionObserver 精准控制
这是目前唯一可预测、可复用、能配合滚动/Tab 切换/用户停留行为的方案。关键不是“用了 Observer”，而是初始化时机和生命周期管理是否严谨。
实操要点：
- 初始 HTML 中彻底删掉
src，只保留data-src和占位样式（如height: 400px; background: #f5f5f5;） -
IntersectionObserver的rootMargin设为"0px 0px 300px 0px"，提前触发，避免用户刚看到边框才开始加载 - 回调中把
data-src赋给src后，**必须立即调用observer.unobserve(iframe)**，否则滚动来回会重复加载 - 务必监听
iframe.onload再更新状态；若 iframe 可复用（如 Tab 切换），加载完成后加data-loaded="true"，下次直接iframe.style.display = "block"
尺寸未预留是大屏卡顿的真正根源
没设 width 和 height（或 CSS aspect-ratio）会导致 iframe 加载瞬间触发 CLS（布局偏移），拖慢 LCP，影响 Core Web Vitals 评分。这对大屏尤其致命 —— 一个未预留尺寸的 iframe 可能让整屏重排。
必须做到：
- 所有
<iframe></iframe>标签显式声明width和height属性，或用 CSS 设置固定宽高 /aspect-ratio: 16/9 - 若 iframe 内容高度动态（如报表图表），用
min-height+max-height控制边界，避免撑爆容器 - 禁止用
%或vh/vw直接设 iframe 尺寸 —— 容易因父容器未渲染完成导致计算为 0，白屏或错位
sandbox 配置稍有不慎就是高危漏洞
sandbox="allow-scripts allow-same-origin" 在权限系统里是典型高危配置：同源时子 iframe 可直接读写父页 localStorage、cookie 及 DOM，相当于把 RBAC 角色数据、用户 token、临时编辑草稿全暴露出去。
真正可控的 sandbox 权限组合应从最小可用起步：
- 基础起步：
sandbox="allow-scripts"—— JS 能执行，但无法访问父页、不能提交表单、不能弹窗、localStorage是空的 - 需要跨域通信：
sandbox="allow-scripts"+postMessage，绝不用allow-same-origin换便利 - 需动态加载资源（如图标 CDN）：
sandbox="allow-scripts allow-popups"，但禁用target="_blank"，改用window.open(url, '_blank', 'noopener') - 绝对禁止：
allow-top-navigation—— 一点就跳转钓鱼页；allow-forms—— 表单提交目标不可控，易被劫持
UI 隔离 ≠ 功能隔离。沙箱 iframe 中的 localStorage、sessionStorage、IndexedDB 全部绑定到临时 null origin，刷新即丢。权限管理 UI 的筛选条件、折叠状态、草稿内容，必须由父页统一托管，通过 postMessage 显式同步。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
