原生 loading="lazy" 对 <iframe> 仅在静态 HTML 中生效（Chrome 77+、Firefox 75+、Safari 15.4+），动态插入、带随机参数、旧版 WebView 或同时写 src 时均失效；广告 iframe 必须用 data-src + IntersectionObserver 手动控制，且须显式设置宽高防 CLS。
iframe 的 loading="lazy" 什么时候能用、什么时候不能用
原生 loading="lazy" 对 <iframe> 仅在静态 HTML 中生效，且依赖浏览器支持（Chrome 77+、Firefox 75+、Safari 15.4+）。它不是万能开关，很多场景下直接写上就等于没写。
- 广告 SDK 动态插入的
<iframe>—— 浏览器根本不解析它的loading属性，属性被忽略 -
src带随机参数（如?t=1712345678）—— 缓存失效，浏览器可能立刻发起请求，loading="lazy"形同虚设 - 微信 iOS 内置浏览器或旧版安卓 WebView —— 属性不识别，回退为
eager加载 - 同时写了
src和loading="lazy"—— 浏览器可能抢在 IntersectionObserver 注册前就加载了，造成重复请求
data-src + IntersectionObserver 的标准写法
这是目前最可控、可配合业务逻辑（比如广告曝光计费、tab 切换复用）的方案。关键不在“用了 Observer”，而在细节是否到位。
- 初始 HTML 中完全不写
src，只保留data-src和占位结构，例如：<iframe width="300" height="200"></iframe> -
IntersectionObserver的threshold别设成0，推荐用0.2（20% 可见即触发），避免用户快速滑过却没加载 - 触发加载后必须立即调用
observer.unobserve(iframe)，否则滚动来回会重复加载 - 加载完成前要加 skeleton 占位或 loading 提示，否则白屏明显；若 iframe 可能复用（如 tab 切换），加载后标记
data-loaded="true"，下次直接iframe.style.display = "block"
广告 iframe 必须绕开 loading="lazy"
广告位延迟加载不是“可选项”，是性能底线。广告 SDK 自身通常已内置懒加载逻辑，强行加 loading="lazy" 反而干扰其曝光上报时机，甚至导致计费丢失。
- 广告 iframe 应统一走
data-src+ 手动触发机制，确保首次进入视口时才调用 SDK 的render()或load()方法 - 务必预留尺寸（显式设置
width/height），否则加载后布局偏移（CLS）会拉低 Core Web Vitals 分数 - 跨域 iframe 要加
sandbox属性（如sandbox="allow-scripts allow-same-origin"），限制执行权限，防 XSS 和资源滥用 - 如果广告位在首屏附近（比如页面中部偏上），建议设
threshold: 0.5并配合rootMargin: "100px"提前触发，避免用户看到空白再加载
为什么 width/height 不是可选、而是必填项
没有显式宽高的 <iframe> 在懒加载完成前是 0×0，加载后突然撑开，引发布局偏移（CLS）。Core Web Vitals 直接扣分，且用户体验断裂感强。
立即学习“前端免费学习笔记（深入）”；
- 即使响应式布局，也要用 CSS 宽高比技巧（如
aspect-ratio: 16/9）或 padding-top 占位，保证 DOM 渲染时已有空间 - 服务端渲染（SSR）或静态生成（SSG）场景中，必须在 HTML 输出阶段就固化
width和height，不能靠 JS 补 - Safari 对
aspect-ratio支持较晚（iOS 15.4+），旧版本需 fallback 到 padding-top 方案
loading="lazy" 还以为起了作用；以及广告位未设 rootMargin 导致用户已看到位置却还没加载，误判为“卡顿”。这些细节不处理，性能优化就停留在表面。 
