广告 iframe 无法通过 loading="lazy" 实现懒加载，因其动态插入、跨域 src 及 sdk 刷新机制导致原生懒加载失效；必须用 data-src + intersectionobserver 控制加载时机，并预留尺寸防 cls、手动触发 sdk 刷新。
广告 iframe 不能靠 loading="lazy" 延迟加载，它在绝大多数真实场景下完全失效——不是浏览器不支持，而是广告本身动态插入、跨域 src、SDK 刷新逻辑等底层机制，让原生懒加载形同虚设。
为什么 loading="lazy" 对广告 iframe 没用
常见错误现象：<iframe src="https://ad.example.com/" loading="lazy"></iframe> 在 Chrome Network 面板里仍显示 Priority: high，页面一打开就发请求。
- 只对 HTML 中静态书写的
<iframe></iframe>生效；广告 SDK（如 GAM、广点通）返回的 iframe 是 JS 动态创建的，浏览器根本不会解析它的loading属性 - Safari 15.4+ 才开始支持
loading="lazy"对<iframe></iframe>的识别，旧版安卓 WebView、iOS 微信内置浏览器直接忽略 - 若同时写了
src又监听 IntersectionObserver，浏览器可能先加载一次src，JS 再替换，造成两次请求 + 计费异常
必须用 data-src + IntersectionObserver 控制真实加载时机
这是目前唯一能兼顾兼容性、计费准确性和防抖动的方案：先占位，等进入视口再注入 src，并主动触发 SDK 刷新。
- 广告容器用
<div class="ad-slot" data-ad-unit="/123/home_top" data-ad-type="banner"></div>，不写<iframe></iframe>，也不设src -
IntersectionObserver的threshold设为0.2（20% 可见即触发），避免用户快滑过去却没加载 - 创建
iframe后必须加sandbox="allow-scripts allow-popups"，否则广告脚本无法执行，且可能污染主页面 - 加载完成后调用对应 SDK 方法，例如 GAM 是
googletag.pubads().refresh([slot])，广点通是qqad.refresh(slot)
预留尺寸防 CLS，避免布局抖动
广告位高度不确定，是首屏 Cumulative Layout Shift（CLS）的主要来源之一。不预留空间，广告加载后会把下方内容往下推，用户体验直接受损。
- 用 CSS 固定容器高宽，或设置
aspect-ratio（如aspect-ratio: 3 / 1），配合min-height保底 - 禁用
height: auto或依赖 JS 动态计算高度——网络波动或 SDK 加载失败时，容器可能塌陷 - 如果广告位响应式变化（如横幅 → 插页），应在 CSS 中用
@media提前定义各断点尺寸，而非等 JS 注入后重排
动态 iframe 创建后必须手动触发 SDK 刷新
广告 SDK 不会自动感知你 JS 新建的 iframe，它只认自己初始化时绑定的 DOM 节点或预注册的 slot ID。
- 不要只塞
src就完事，GAM 必须调googletag.display(slotId)或refresh()；穿山甲需ttq.push({action: 'display', ...}) - 刷新前检查 SDK 是否已就绪，用
typeof googletag !== 'undefined'或 Promise 包裹，避免ReferenceError - 多个广告位批量刷新时，传数组比循环调用更高效，例如
googletag.pubads().refresh([slot1, slot2])
最易被忽略的是：广告加载完成 ≠ 渲染完成。有些 SDK 会在 iframe 内二次加载资源、执行竞拍、甚至延迟展示（如视频广告的「可跳过」倒计时），这些阶段无法靠 JS 监听，只能靠广告平台提供的回调（如 GAM 的 addEventListener('impressionViewable', ...)）。别把「iframe 加载完成」当成「广告已曝光」。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
