图片未设width/height属性导致浏览器解析html时按0×0占位，加载后重排使下方内容下移，引发cls抖动；必须用html原生像素值属性（如width="600" height="400"）声明尺寸以提供确定性，css设置无效。
图片没加载完就渲染，浏览器不知道它该占多大地方，等图一来，下面文字全被顶下去——这就是抖动的根源。必须让浏览器在解析 HTML 阶段就知道图片的尺寸。
img 必须带 width 和 height 属性
不是靠 CSS 控制，而是 HTML 层面声明原始宽高。浏览器靠这两个属性计算宽高比、预留空间，哪怕图片 404 或加载慢，布局也不会变。
-
width和height值可以是实际像素（如width="600" height="400"），也可以是接近的估算值，重点是提供确定性 - 仅写
style="width: 100%; height: auto"没用——HTML 解析时浏览器看不到这个，仍按 0×0 占位 - 响应式场景下，
width/height依然有效：img会按比例缩放，但空间已预留；配合max-width: 100%和height: auto是安全组合 - Safari 对缺失
width/height的loading="lazy"图片可能直接降级为 eager 加载，导致首屏延迟
用 aspect-ratio 替代 width/height 的兼容性兜底
CSS 的 aspect-ratio 能替代部分场景，但老浏览器不支持，不能单独依赖。
- 现代写法：
<img src="a.jpg" style="max-width:90%">—— 语义清晰，但 Chrome 88+、Firefox 89+、Safari 15.4+ 才支持 - 兼容方案：仍保留
width和height属性，再加style="aspect-ratio: ..."双保险；旧浏览器读属性，新浏览器优先用 CSS - 注意：
aspect-ratio不影响 HTML 解析阶段的布局计算，它只作用于渲染阶段；所以仍需width/height提供初始占位信息
懒加载图片也得守这个规矩
loading="lazy" 不是免死金牌，反而更容易暴露尺寸缺失问题。
- 用户滚动到视口才触发加载，此时重排更明显——抖动感知更强
- 必须搭配
width和height，否则 Safari 可能忽略 lazy 行为，Chrome 也可能因无法预留空间而强制重排 - 避免父容器同时用
transform+overflow: hidden，这会让浏览器误判滚动根节点，导致 lazy 不触发或错乱 - 首屏关键图（如 banner、logo）不该 lazy，应设
loading="eager"或不加该属性，并确保width/height存在
动态插入图片时怎么预留空间
JS 插入的 img 元素，如果没提前占位，插入瞬间就会挤压流内内容，造成 CLS。
- HTML 源码中就预留容器：
<div id="ad-slot" style="min-height: 250px"></div>，高度尽量贴近历史均值 - 不要用
visibility: hidden或opacity: 0占位——它们不脱离文档流，但无尺寸，等于没占 - 骨架屏比空 div 更优：结构稳定、有视觉预期，且自身不依赖内容尺寸
- 第三方组件（如 cookie banner、广告脚本）优先用
position: fixed或position: sticky，彻底脱离文档流，不参与布局计算
真正难处理的不是写几行 HTML，而是所有动态内容、第三方脚本、甚至字体加载都可能悄悄破坏尺寸确定性。只要有一个 img 没设 width/height，或者一个 JS 插入模块没预留高度，CLS 就可能超标——而且这种抖动往往在线上才被用户感知，开发时容易漏掉。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
