cls是浏览器自动计算的分数，无法用html直接生成，只能通过控制html结构和资源加载行为来降低；图片和iframe必须设置width/height属性，仅css无效；字体加载需用font-display:swap配合size-adjust；动态内容须预留空间；第三方脚本需主动监控并包裹占位。
CLS 不是能“制作”出来的东西，它只是浏览器自动计算出的一个分数。你没法用 HTML “生成 CLS”，只能通过控制 HTML 结构和资源加载行为，让这个分数变低。
图片和 iframe 必须带 width/height 属性
浏览器解析 HTML 时，如果 <img> 或 <iframe></iframe> 没有内联的 width 和 height，就会按 0×0 占位；等资源加载完成再重排，下方内容直接下移——这是 CLS 最常见来源。
- 必须写成
<img src="a.jpg" style="max-width:90%" style="max-width:90%">，仅靠 CSS 设置宽高无效 - 响应式场景可用
style="aspect-ratio: 16/9; width: 100%; height: auto;"，但 Safari 15.4+、Firefox 89+ 才稳定支持 -
<iframe></iframe>同理，loading="lazy"不能替代尺寸声明，否则 YouTube 等嵌入必然触发偏移 - 用
srcset+sizes时，仍要配width/height，否则浏览器可能先按默认尺寸占位，再调整，造成两次偏移
字体加载必须控制回退行为
自定义字体加载期间用系统字体渲染，加载完再换，若两套字体行高、字宽差异大，文本块高度突变，就会把下面的内容往下顶。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 禁用
font-display: optional——它可能跳过加载，导致字体反复切换，CLS 更糟 - 优先用
font-display: swap，但要配合@font-face中的size-adjust（如size-adjust: 102%）或descent-override对齐度量值 - 关键容器（如
<h1></h1>、按钮）建议预设line-height和min-height，防止高度塌缩或撑开 - 避免在
font-family列表里混用等宽与比例字体（如"Monaco", "Helvetica"），ch/ex单位行为不一致，易引发宽度跳变
动态内容注入前必须预留空间
广告、评论、推荐模块这类 JS 动态插入的内容，只要没提前占位，插入瞬间就会把原有内容往下顶——Lighthouse 报告里常标为 贡献 CLS，实际就是这类元素在作祟。
- 在 HTML 源码中就写好占位容器：
<div id="ad-slot" style="min-height: 250px"></div>，高度尽量接近历史均值 - 避免用
visibility: hidden或opacity: 0占位——它们不脱离文档流，但无尺寸，等于没占 - 若必须 JS 插入，优先用
position: absolute或transform: translateY()偏移，不参与文档流布局 -
contain: layout style paint可隔离该区域影响（Chrome 85+ 支持），但前提是容器本身已有明确尺寸约束
第三方脚本注入节点不可控，得主动监控
Google Ads、Facebook Pixel、客服 Widget 这类脚本，往往在 DOMContentLoaded 后异步注入 DOM 节点或内联样式，且不声明尺寸，是 CLS 的黑盒来源。
- 不能指望它们加
width/height，得在注入前手动加 wrapper 并设min-height - 用 Chrome DevTools 的 Rendering 面板开启
Layout Shift Regions，实时观察哪些区域在跳 - 生产环境用
getCLS({ reportAllChanges: true })上报每次偏移片段，结合attribution定位具体元素 - Lighthouse 报告波动大，只模拟一次慢网；真实用户场景中，广告延迟 3s 加载才偏移，它根本测不到
最常被忽略的一点：CLS 数值低 ≠ 页面没偏移，比如用 transform 移动元素不会计入 CLS，但它仍可能破坏滚动锚定或影响屏幕阅读器；CLS 数值高也不代表要推翻架构，关键是定位到哪几个元素在“跳”，然后逐个加约束。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
