广告位CLS抖动主因是HTML结构缺失，必须在首帧渲染前用width/height原生属性声明广告容器尺寸，CSS设置无效；需async加载广告脚本、禁用transform等干扰属性，并确保父容器有明确占位。
广告位导致的排版抖动（CLS）几乎全是 HTML 结构缺失引起的，不是 JS 能“修复”的——必须在首帧渲染前就给浏览器确定的占位空间。
广告容器必须显式声明宽高属性
AdSense、腾讯广告、穿山甲等平台要求 <div> 或 <code><ins></ins> 容器在 HTML 源码中带 width 和 height 属性，否则拒绝渲染或返回空白。仅靠 CSS 设置 width: 300px 或 aspect-ratio: 4/3 不生效：浏览器解析 HTML 阶段无法读取 CSS，首帧仍按 0×0 占位。
-
<div id="ad-1" width="300" height="250"></div>✅ 原生属性，首帧即知尺寸 -
<div id="ad-1" style="width: 300px; height: 250px;"></div>❌ CSS 生效晚于首帧布局，必然抖动 - 响应式广告可用
data-ad-format="auto"+style="min-height: 250px;"，但必须配合服务端预估高度，不能全靠 JS 插入
避免用 visibility: hidden 或 opacity: 0 占位
这类样式不参与文档流，等于没占位。用户滚动到广告区域时，真实广告 DOM 插入瞬间撑开布局，下方内容被顶下去——这就是 CLS 的典型来源。
- 正确占位：
<div id="ad-slot" style="min-height: 250px; background: #f5f5f5;"></div> - 错误占位：
<div id="ad-slot" style="visibility: hidden; height: 250px;"></div> - 若广告加载延迟明显，优先用
min-height取历史均值（如信息流广告取 250px，横幅取 90px），而非凭空猜测
