loading="lazy"对iframe几乎无效，因其被浏览器规范强制忽略：首屏内iframe必立即加载并阻塞HTML解析；仅当跨域、静态声明、明显视口外、显式宽高、无布局干扰、缓存合理时才可能延迟加载。
loading="lazy" 对 iframe 几乎没用，除非你满足一连串苛刻条件；首屏 iframe 加了反而更卡。
为什么 loading="lazy" 在 iframe 上经常白写
它不是“不生效”，而是被浏览器规范硬性限制：只要 <iframe> 初始位置在视口内（getBoundingClientRect().top <= window.innerHeight），无论有没有 loading="lazy"，都会立刻发起请求，并阻塞 HTML 解析直到其 DOMContentLoaded 完成。
常见失效现象包括：
- Network 面板里 iframe 请求时间戳早于主页面
DOMContentLoaded - 滚动后 iframe 仍不加载（实际是压根没触发 lazy）
- 同域
src（如./chat.html）在 Chrome/Safari 中直接忽略 lazy 行为 - Firefox 当前（2026）**完全不支持** iframe 的
loading="lazy"
loading="lazy" 真正起效的全部前提
必须同时满足以下所有条件，才可能延迟请求：
立即学习“前端免费学习笔记（深入）”；
-
src是跨域地址（如https://widget.example.com/embed.html），不能是相对路径或同域 URL - 元素在 HTML 中静态声明（非 JS 动态插入）
- 初始
offsetTop > 2 * window.innerHeight（明显在视口下方） - 显式设置了
width和height属性（aspect-ratio或max-width: 100%不算） - 父容器没用
overflow: hidden、transform、position: fixed等干扰布局检测的样式 - 响应头含
Cache-Control: public, max-age=3600（不能有no-cache或no-store）
首屏 iframe 必须显示？别碰 loading 属性
首屏 iframe 加 loading="lazy" 不仅无效，还会因强制 eager 加载加重首屏卡顿。正确做法是彻底放弃该属性，改用主动控制：
- HTML 中删掉
src，只留和占位样式（如height: 400px; background: #f5f5f5;） - 用
IntersectionObserver监听进入视口，rootMargin设为"0px 0px 300px 0px"提前触发 - 回调中赋值
iframe.src = iframe.dataset.src，然后立刻调用observer.unobserve(iframe) - 务必监听
iframe.onload再更新状态；但contentWindow可访问性需额外判断，不能仅靠onload就发postMessage
广告或可复用 iframe 怎么处理
广告 iframe（GAM、广点通等）根本不能依赖 loading="lazy"：Network 面板里仍显示 Priority: high，且跨域限制下无法控制生命周期。
- 容器用
<div class="ad-slot" data-ad-unit="/123/home_top"></div>，不写任何<iframe>标签 - JS 创建 iframe 时必须设
sandbox="allow-scripts allow-popups" - 注入
src后，必须手动调用广告 SDK 的refresh()或display()方法，否则不计费也不展示 - 必须预留固定宽高（如
height: 250px），否则触发 CLS，影响 Core Web Vitals
最常被忽略的一点：懒加载只管“何时发起请求”，不管“请求回来的内容是否渲染快”。很多团队优化了加载时机，却没处理 iframe 内部资源（如 JS、字体、图片）的加载水线，结果 LCP 没改善，内存占用反而更高。
