根本原因是加载时机失控和容器不可控；必须用data-src+IntersectionObserver手动控制加载，预留尺寸防CLS，并通过sandbox隔离及手动触发SDK refresh确保计费准确。
广告位展示效率低，根本原因不是“没加 lazy”，而是加载时机失控 + 容器不可控。直接写 <iframe src="..."></iframe> 或滥用 loading="lazy"，反而会触发重复请求、CLS 布局抖动、甚至被风控拦截。
为什么 loading="lazy" 对广告 iframe 完全失效
原生 loading="lazy" 在 Safari 15.4+ 才支持 <iframe></iframe>，而绝大多数广告 SDK（如 GAM、广点通）返回的是 JS 动态插入的跨域 iframe——浏览器压根不解析它的 loading 属性。更糟的是：
-
<iframe src="https://ad.example.com/" loading="lazy"></iframe>在 Chrome Network 面板里仍显示Priority: high，首屏就发请求 - 安卓旧 WebView、微信内置浏览器直接忽略该属性
- 若同时设了
src又监听IntersectionObserver，可能先加载一次再 JS 替换，造成两次曝光/计费
必须用 data-src + IntersectionObserver 手动控制加载时机
这是目前唯一能对齐广告 SDK 刷新逻辑、规避重复请求、且兼容所有主流环境的方案。关键不在“延迟”，而在“可控注入”：
- 广告容器用
<div class="ad-slot" data-ad-unit="/123/home_top" data-ad-type="banner"></div>，不写iframe，不设src - 监听时用
threshold: 0.2（20% 可见即触发），避免用户快速滑过却没加载 - 触发后动态创建
<iframe></iframe>，src赋值为data-src值，并设置sandbox="allow-scripts allow-popups"隔离脚本作用域 - iframe
load后立即调用 SDK 方法，如googletag.pubads().refresh([slot])或adSDK.display(slot)
预留尺寸防 CLS 是硬性要求，不是可选项
广告位高度不确定 = 浏览器无法预留空间 = 内容突然下移（Cumulative Layout Shift），直接拉低 Core Web Vitals 分数。常见错误是只设 min-height 或靠 JS 估算：
立即学习“前端免费学习笔记（深入）”；
- 横幅广告统一按 90px 高度预留（含 padding/margin），用
aspect-ratio: 320 / 90或内联style="height: 90px;" - 信息流广告按典型宽高比（如 1:1、4:3）设
aspect-ratio，配合width: 100% - 禁用
height: auto或min-height: 0这类“让内容撑开”的写法 - 如果广告尺寸完全动态，至少用
max-height+overflow: hidden保底
真正卡住广告效率的，从来不是“怎么写 iframe”，而是“什么时候写”和“写了之后谁来管它”。data-src + IntersectionObserver 是起点，预留尺寸和 sandbox 隔离是底线，而手动触发 SDK refresh 才是计费准确性的最后一道闸门。
