loading="lazy"对首屏iframe完全无效，因其被浏览器规范强制禁用：只要iframe在初始视口内，无论是否设置该属性都会立即加载并阻塞html解析。
loading="lazy"对首屏iframe完全无效
它不是“没起作用”，而是被浏览器规范强制禁用：只要<iframe></iframe>在初始视口内（即getBoundingClientRect().top ），无论是否写了<code>loading="lazy"，都会立刻发起请求，并阻塞 HTML 解析，直到该 iframe 的DOMContentLoaded完成。你在 Network 面板看到的请求时间戳，一定早于主页面的DOMContentLoaded。加了反而可能因强制 eager 加载加重首屏卡顿。
非首屏iframe用loading="lazy"要满足全部条件
只在以下**全部条件同时成立**时才会真正延迟加载：
-
<iframe></iframe>在 HTML 中静态声明（非 JS 动态插入） -
src是确定地址（不能含?t=随机参数，也不能依赖服务端重定向） - 响应头含
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只能用data-src+IntersectionObserver
不能靠loading属性，必须主动控制生命周期：
- 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可访问性需额外判断，不能仅靠onload就发postMessage
广告iframe必须绕开loading="lazy"
广告位延迟加载不是“可选项”，是性能底线，但loading="lazy"对其完全无效：
- 它对 GAM、广点通等返回的跨域 iframe 无效，Network 面板里仍显示
Priority: high - 容器必须用
<div class="ad-slot" data-ad-unit="/123/home_top"></div>，不写任何<iframe></iframe>标签 - 创建 iframe 时必须设
sandbox="allow-scripts allow-popups"，防止广告脚本污染主域 - src 注入后，必须手动调用广告 SDK 的
refresh()或display()方法，否则不计费也不展示 - 必须预留固定宽高（如
height: 250px），否则触发 CLS，影响 Core Web Vitals
最常被忽略的是：懒加载只管“何时发起请求”，不管“请求回来的内容是否渲染快”。如果 iframe 页面本身没做优化（比如没设DOMContentLoaded临界资源、没压缩 JS），再怎么延迟加载也救不了用户体验。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
