广告位必须在html源码中硬写宽高，否则页面会因布局偏移而抖动；正确做法是服务端首屏html中直接声明尺寸，如。
广告位必须在HTML源码里硬写宽高
广告加载前页面就抖，八成是因为<div id="ad-slot">没声明尺寸。浏览器解析HTML时，遇到空容器就按0×0占位，等广告SDK注入内容才撑开高度——下方所有文字、按钮全被往下顶，CLS直接爆表。
<p>正确做法是：在服务端吐出的首屏HTML里就写死<code><div id="ad-slot" style="width: 300px; height: 250px;"></div>。哪怕只是保守估计值，也比CSS里写height: auto强十倍。
- 响应式场景用
min-height: 250px+max-width: 100%组合更稳妥，避免横竖屏切换时二次重排 - 禁用
visibility: hidden或opacity: 0占位——它们不脱离文档流，但无尺寸，等于没占 - 第三方广告SDK（如
adsbygoogle.push()）只认“已渲染且有明确尺寸”的DOM节点，否则可能静默失败
iframe广告必须带width/height属性，CSS无效
嵌入YouTube、联盟广告或跨域iframe时，仅靠style="width: 100%; height: 315px"无法阻止抖动。浏览器首次绘制时仍按默认300×150占位，等iframe加载完成再重排，用户滚动到视口瞬间就会感知明显跳动。
必须显式写成：<iframe src="https://..." width="100%" height="315"></iframe>。这个width和height是HTML属性，不是CSS样式，浏览器在解析阶段就能拿到确定性尺寸信号。
- 若尺寸完全不可预知（如动态竞价广告），用
<div id="ad-slot" style="min-height: 250px"></div>在HTML源码中硬占位 - 不要依赖
loading="lazy"来缓解——它反而放大抖动感知，因为抖动发生在用户已开始滚动之后 - 检查Network面板确认iframe是否触发了两次加载（比如先载placeholder再载真实内容），那是双重布局偏移的根源
广告插入时机要避开layout thrashing高发区
JS动态插入广告模块时，如果在scroll或resize回调里直接el.innerHTML = adHtml，极易触发布局抖动。每次插入都强制浏览器同步重排，尤其当父容器本身又在局部滚动区域内时，抖动会叠加放大。
安全做法是：用requestAnimationFrame包裹插入逻辑，并确保插入前后不穿插读取几何属性（如offsetHeight、getBoundingClientRect()）。
- 先批量收集所有待插入广告位的
rect信息，再统一写入DOM - 插入后立即调用
el.style.cssText = "display: block;"而非逐个设el.style.display，减少样式刷新次数 - 若广告位在
overflow: auto容器内，别在里面放position: fixed的关闭按钮——它会高频跳动，应挂到document.body下
骨架屏与广告位结构必须同构
服务端渲染骨架屏时，广告占位<div class="ad-skeleton">的标签名、class、子节点数、层级深度，必须和服务端后续注入的真实广告DOM完全一致。否则客户端hydrate时会丢弃整个节点树重挂载，造成闪屏+表单清空+焦点丢失。
<p>常见错误包括：服务端用<code><section class="ad-slot"></section>，客户端渲染成<div class="ad-slot">；或骨架用了3个<code><span></span>，真实广告只有2个——这种细微差异都会让hydration错位。
- 禁用动态拼接class：
class="ad-slot {{ loading ? 'skeleton' : '' }}"是危险写法，应固定为class="ad-slot ad-skeleton" - 骨架元素必须设
overflow: hidden，否则渐变背景溢出圆角，破坏视觉一致性 - 广告加载完成前，骨架DOM必须被
removeChild()或replaceWith()卸载，不能靠display: none隐藏
mounted或onLoad里偷偷调用clientHeight，这种抖动得靠Performance面板看Layout事件密度才能定位。
