cls是衡量页面视觉稳定性的指标，非优化工具；高cls常因img/iframe缺尺寸属性、字体切换导致容器高度变化、动态内容未预留空间所致，需从资源加载、尺寸预设和dom插入时机三方面系统优化。
CLS（Cumulative Layout Shift）本身不是用来“改善”布局偏移的工具，它只是一个**度量指标**——就像体温计不能退烧，它只告诉你页面在视觉稳定性上有多“晃”。真正能减少布局偏移的是你对 HTML 结构、资源加载和渲染行为的控制。
为什么 CLS 高通常意味着 img 和 iframe 缺少尺寸属性
浏览器在解析 HTML 时，如果遇到没有 width 和 height 的 <img> 或 <iframe></iframe>，会先渲染一个 0×0 占位框；等图片/内容加载完成、尺寸确定后，再重排布局——这就是典型的 CLS 跳变来源。
- 现代做法：给所有
<img>加上明确的width和height属性（不是 CSS 宽高），让浏览器提前预留空间 - 响应式场景下可用
aspect-ratio（如style="aspect-ratio: 16/9;"），但注意 Safari 15.4+ 才稳定支持 -
<iframe></iframe>同理，必须声明width和height，否则嵌入内容（如 YouTube）加载后必然触发偏移
font-display: swap 导致 FOIT/FOUT 进而拉高 CLS？
是的，但问题不在 font-display 本身，而在字体加载期间文本容器高度突变。比如：系统字体较瘦、自定义字体更粗，换字后行高撑开，下方元素被往下推。
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 避免用
font-display: optional—— 它可能跳过字体加载，导致布局反复回退 - 优先用
font-display: swap，但配合size-adjust或font-optical-sizing: auto缓解重排（需现代浏览器支持） - 更稳妥的做法：用
@font-face中的descent-override、line-gap-override等属性对齐字体度量值，使后备字体与 Web 字体高度一致
动态插入内容（如广告、推荐位）如何不触发 CLS
任何在 DOM 就绪后追加、且未预留空间的块级元素，都会造成布局偏移。常见于第三方脚本注入的 <div id="ad-slot"></div>。
- 为广告容器设置固定高度（或最小高度）+
overflow: hidden，防止内容撑开 - 使用
contain: layout style paint隔离该区域的渲染影响（Chrome 85+ 支持） - 关键：把广告占位符放在 HTML 源码中，并赋予
height（哪怕只是min-height: 250px），而不是靠 JS 插入空<div> <li>若必须 JS 注入，优先用 <code>position: absolute或transform: translateY()偏移，避免影响文档流
CLS 低 ≠ 页面没偏移，只是偏移没被计入——比如用 transform 移动元素不会触发 CLS，但它仍可能影响可访问性或滚动锚定。真正的稳定，得从资源加载顺序、尺寸可预测性、DOM 插入时机这三处下手，而不是盯着那个分数改来改去。
