cls 并非由 css 本身引起，而是动态引入 css 时触发重排/重绘，导致已交互页面出现意外位移；常见原因包括样式突变、字体替换跳变、响应式断点放大布局漏洞。
CLS 不是 CSS 本身引起的，而是动态引入 CSS 时，触发了浏览器对已有 DOM 的重排或重绘，且这些重排发生在用户已开始交互或滚动之后——此时任何非预期的位移都会被计入累积值。
link 标签动态插入后立即触发 layout shift
动态插入 <link rel="stylesheet">（比如通过 document.head.appendChild()）会让浏览器立刻解析并应用规则，但此时页面可能已完成首屏渲染。如果新样式修改了以下任一属性，就会导致元素尺寸或位置突变：
-
width/height/padding/margin -
font-size或line-height（尤其影响段落高度） -
display（如从none切到block） -
transform外的定位方式（position: absolute本身不触发，但若父容器因新样式改变了transform或contain，就可能间接影响）
常见错误现象：
- 页面加载后几秒，导航栏突然变高，把正文往下顶
- 某个按钮文字换行，导致下方卡片整体下移
- 第三方 UI 库的 CSS 晚于骨架屏注入，造成“闪动式占位”
实操建议：
- 把所有关键样式提前内联在
中，避免运行时注入 - 若必须动态加载（如主题切换），用
media="print"预加载，再通过 JS 切换media=""激活，减少 layout 触发时机 - 禁止在
DOMContentLoaded后直接 appendlink；改用requestIdleCallback延迟到空闲期
动态 CSS 改变了字体加载行为，间接引发 CLS
很多动态 CSS 注入会附带新的 @font-face 声明，或修改 font-display 策略。一旦触发字体替换（FOUT），而 fallback 字体与 Web Font 的 ch、ex、line-height 不一致，文本块高度就会跳变。
典型场景：
- 主题 CSS 加载后启用
font-display: optional→ 字体可能反复加载/卸载，造成多次偏移 -
@font-face中漏写size-adjust或font-size-adjust，导致标题高度突变
实操建议：
- 所有字体声明必须在初始 HTML 中完成，不依赖动态 CSS 注入
- 若需按需加载字体，用
font-display: swap+@font-face { size-adjust: 102%; }控制高度偏差 - 避免在 font-family 列表中混用等宽与比例字体（如
"Fira Code", "Helvetica"），ch单位行为差异大，易引发宽度跳变
动态 CSS 修改了响应式断点或容器尺寸，放大已有漏洞
动态引入的 CSS 往往包含媒体查询或基于视口的计算（如 clamp()、vw）。但这些规则生效时，图片、广告、iframe 等元素可能尚未预留空间——原本“静默”的布局缺陷，此时被断点切换瞬间暴露。
例如：
- 初始 CSS 中
img没写width/height，靠aspect-ratio占位；但动态 CSS 覆盖了该规则，或禁用了aspect-ratio - 广告容器用
min-height占位，但新 CSS 把它设为height: auto，导致插入时撑开内容
实操建议：
- 所有媒体查询应前置，不要靠 JS 动态注入断点逻辑
- 对
img、iframe、第三方嵌入，强制使用原生width/height属性（不是 CSS），这是唯一能被 HTML 解析阶段识别的占位方式 - 用
contain: layout style封装可能受动态样式影响的区域，限制重排传播范围
动态引入 CSS 本身不会“导致” CLS，但它像一把钥匙，打开了早已存在的布局脆弱性。真正要盯住的，是那些没预留尺寸的图片、没约束高度的广告容器、以及字体替换时没人管的 line-height。这些点，哪怕 CSS 一分不加，只要 JS 或网络稍慢，一样爆 CLS。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
