广告位CLS抖动主因是HTML结构缺失，必须在首帧渲染前用width/height原生属性声明广告容器尺寸，CSS设置无效；需async加载广告脚本、禁用transform等干扰属性，并确保父容器有明确占位。
广告位导致的排版抖动（CLS）几乎全是 HTML 结构缺失引起的，不是 JS 能“修复”的——必须在首帧渲染前就给浏览器确定的占位空间。
Wechat Article Html
下载
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
广告容器必须显式声明宽高属性
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），而非凭空猜测
