html本身不解决cls，它只是布局偏移发生的舞台；真正压住跳动的是html中width/height属性、aspect-ratio、预留占位等具体实践。
HTML 本身不“解决”CLS，它只是布局偏移发生的舞台；真正能压住跳动的，是你在 HTML 中写的那些属性、顺序和占位逻辑。
img 和 iframe 必须带 width/height 属性
浏览器解析到 <img> 或 <iframe></iframe> 时，如果没看到 width 和 height，就按 0×0 渲染占位——等资源加载完，再重排一次。这就是最常见、最直接的 CLS 来源。
- 用原始像素值写死：比如
<img src="hero.jpg" style="max-width:90%" style="max-width:90%">，兼容性最好，服务端渲染（SSR）或静态站点也稳 - 响应式场景下别只靠 CSS 调大小：
width: 100%+ 无 HTML 尺寸 = 白给 CLS - 现代替代方案是
aspect-ratio，但注意 Safari 15.4+、Chrome 88+ 才稳定支持；若需降级，仍得 fallback 到width/height或 padding-top 技巧 - 懒加载（
loading="lazy"）不能代替尺寸声明——两者要同时存在
动态插入内容前必须预留空间
JS 往 或某个容器里 appendChild 广告、推荐卡片、聊天按钮时，如果目标区域原本是空的，新元素一进来就会把下面所有内容往下顶——CLS 瞬间飙升。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 优先用服务端预留：比如广告位用
<div class="ad-slot" style="min-height: 250px;"></div>，哪怕里面暂时没内容 - 客户端注入时，避免插在现有内容“上方”：插在末尾比插在开头更安全；若必须插顶部，用
position: absolute或transform: translateY()脱离文档流 - 第三方脚本（如 Google AdSense、TikTok Pixel）常自带无占位注入逻辑，检查其文档是否提供“预留容器”选项，或手动包裹一层固定高容器
- Nuxt/Next 等框架中，
v-if或useState触发的组件挂载，也要确保父容器有明确高度约束，否则 hydration 后容易抖
字体加载引发的文本重排不能只靠 font-display
font-display: swap 能缓解 FOIT，但换字体后行高、字宽变化仍会推挤周围元素——尤其是标题、导航栏这类对齐敏感区域。
- 禁用
font-display: optional：它可能完全跳过字体加载，导致回退字体反复切换，CLS 更糟 - 用
@font-face的descent-override、line-gap-override对齐字体度量值，让后备字体和 Web 字体视觉高度一致（Chrome 109+、Firefox 114+ 支持） - 搭配
size-adjust缩放后备字体，例如size-adjust: 102%;让系统字体撑开一点，减少换字体后的高度差 - 关键文案（如 H1、CTA 按钮）可考虑用
font-optical-sizing: auto自适应，但需测试旧版 Safari 兼容性
body 标签被标记为 CLS 主因时，问题不在 body 上
Lighthouse 或 web-vitals 报告里说 是最大贡献者，这其实是“归因机制”的结果：所有子元素偏移最终都算在它的布局边界里。真正该盯的是它内部哪些元素在跳。
- 打开 Chrome DevTools → Rendering → “Layout Shift Regions”，勾选后刷新页面，偏移区域会高亮，点进去看具体 DOM 节点
- 重点排查：没设尺寸的
<img>、异步加载的<iframe></iframe>、JS 注入的弹窗/横幅、字体切换中的<h1></h1>、CSS 动画触发的margin变化 - 检查
里有没有内联<style></style>直接改body的margin或padding—— 这类样式应合并进外部 CSS，确保尽早解析，避免 JS 执行后又重算 - 第三方统计脚本（如 GA4、Hotjar）有时会在 DOMContentLoaded 后追加
<script></script>或<div>，它们若没做占位，也会被记在 <code>名下CLS 数值只是表象，真正难处理的是那些“看起来很稳、但用户滚动到第三屏才突然跳一下”的延迟偏移——广告加载、字体回退、懒加载图片批量出现，都可能躲过首屏检测。盯分数不如盯时间轴上的偏移帧，尤其关注 3 秒之后的 layout shift event。
