loading="lazy"对首屏iframe完全无效，因浏览器规范强制立即加载并阻塞DOM解析；非首屏需同时满足静态声明、确定src、可缓存响应头、视口外位置等条件才生效。
loading="lazy"对首屏 iframe 完全无效，别白加
加了 loading="lazy" 却发现首屏 iframe 还是立刻请求、卡住 DOM 解析，这不是你代码写错了，是浏览器规范强制行为：只要 <iframe> 元素在初始视口内（getBoundingClientRect().top <= window.innerHeight），无论有没有这个属性，都会立即加载并阻塞后续 HTML 解析。你在 Chrome DevTools Network 面板看到的请求时间戳，一定早于主页面的 DOMContentLoaded。
常见误判场景：
- 视觉上“好像不在首屏”，但用了
position: absolute或负 margin 把 iframe 拉到顶部——它仍是 DOM 首屏元素 - 父容器设了
overflow: hidden或transform，干扰浏览器位置判断，懒加载逻辑直接跳过 - Safari 15.3 及更早、IE、多数安卓 WebView 完全忽略该属性，回退为 eager 加载
- Firefox 当前（2026）仍不支持
loading="lazy"对 iframe 的行为，写了等于没写
非首屏 iframe 用 loading="lazy" 的硬性条件
loading="lazy" 只有在全部以下条件同时满足时，才真正延迟发起请求：
- iframe 在 HTML 中静态声明（不是 JS 动态
document.createElement('iframe')插入） -
src是确定地址（不能含?t=1712345678这类随机参数，也不能依赖服务端重定向） - 响应头包含
Cache-Control: public, max-age=3600（不能是no-cache或no-store） - 元素初始位置明显在视口下方（例如
offsetTop > 2 * window.innerHeight） - 父容器没用
overflow: hidden、transform或position: fixed - 显式设置了
width和height（或 CSSaspect-ratio），否则加载瞬间触发 CLS
典型可用场景：<iframe src="help-docs.html" loading="lazy"></iframe> 放在页面底部“帮助中心”模块；或长列表中每个卡片末尾嵌入的轻量工具 iframe。
立即学习“前端免费学习笔记（深入）”；
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
首屏必须显示的 iframe 怎么真正延迟加载
不能靠 loading 属性，必须用 data-src + IntersectionObserver 主动控制生命周期：
- HTML 中彻底删掉
src，只留占位样式（如height: 400px; background: #f5f5f5;） -
IntersectionObserver的rootMargin设为"0px 0px 300px 0px"，提前触发，避免用户刚看到边框才开始加载 - 回调中把
data-src赋给src后，**立即调用observer.unobserve(iframe)**，否则滚动来回会重复加载 - 若 iframe 可复用（如 tab 切换），加载完成后加
data-loaded="true"，下次直接iframe.style.display = "block" - 务必监听
iframe.onload再做状态更新；但注意contentWindow可能为空，需加空值判断
广告 iframe 或动态插入 iframe 别碰 loading="lazy"
广告位、SDK 注入的 iframe、JS 动态创建的 iframe，loading="lazy" 基本无效——浏览器根本不识别它的 loading 属性。更糟的是，如果同时写了 src 又配了 IntersectionObserver，可能先加载一次 src，再执行 JS 替换，导致两次请求。
正确做法：
- 广告容器用
<div class="ad-slot" data-ad-unit="/123/home_top"></div>，不写<iframe>，也不设src - 用
IntersectionObserver监听，threshold: 0.2（20% 可见即触发） - 触发后手动
document.createElement('iframe')，设sandbox="allow-scripts allow-popups"隔离脚本 - 加载完成后调用对应 SDK 的
refresh()或display()方法（如 GAM 的googletag.pubads().refresh()）
真正容易被忽略的点：loading 属性只对静态 HTML 声明生效，而绝大多数生产环境的 iframe（尤其是广告、监控面板、第三方组件）都是动态插入的——这时候写 loading="lazy" 不仅没用，还可能掩盖真实加载问题。
