设了 loading="lazy" 仍布局抖动，因其仅控制请求时机，不提供尺寸占位；浏览器遇无 width/height 的 img 按 0×0 渲染，加载后重排致下方内容下移，引发 cls。
为什么设了 loading="lazy" 还是布局抖动
因为懒加载只控制请求时机，不提供尺寸占位能力。浏览器看到没 width 和 height 属性，就按 0 高渲染，图片一加载，下方内容立刻下移——这叫 CLS（累计布局偏移），和 lazy 没半点关系。
常见错误包括：
-
img只写了width: 100%或aspect-ratio，但没设 HTML 原生width和height - 用
data-src替代src，导致初始无有效占位图，区域直接塌陷 - 在
transform容器或overflow: hidden父级里放图，loading="lazy"静默退化为 eager
真正防抖的硬性条件：必须有可计算的原始宽高比。优先写 <img style="max-width:90%" style="max-width:90%">，兼容性最好，浏览器首帧即知尺寸。
srcset + sizes 不配对等于白写
浏览器在 300ms 内就要决定拉哪张图；如果 sizes 没对齐真实 CSS 断点，它就会选错尺寸——比如你容器只占 33vw，sizes 却默认按 100vw 算，结果拉了张 1920w 的图下来，不是高清，是浪费。
实操要点：
- 查你实际用到的媒体查询断点：
@media (max-width: 768px)和@media (max-width: 1200px)，那srcset就只留768w、1200w、1920w -
sizes必须严格对应容器宽度逻辑，例如：sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw" - 别混用
w和x：同一srcset里只能用一种单位，否则部分浏览器直接忽略整条 - WebP 必须放在 JPEG 前：
srcset="cat-800w.webp 800w, cat-800w.jpg 800w"，确保降级正确
响应式场景下 aspect-ratio 和内联宽高的取舍
aspect-ratio 更灵活，但仅适用于现代浏览器（Chrome 88+、Firefox 89+、Safari 15.4+）；而原生 width/height 属性是唯一全兼容、且能被预加载器识别的方案。
使用建议：
- 首屏关键图、秒杀倒计时旁的商品图，必须用内联
width和height，值按原始图比例来，如width="1200" height="675" - 非关键区域、纯内容流图片，可用
img { aspect-ratio: 16 / 9; width: 100%; height: auto; }配合object-fit: cover - 千万别同时写
width="100%"和height="auto"——它们对浏览器预留空间完全无效
占位图怎么选才真有效
占位图不是为了“看起来像”，而是为了让浏览器能渲染出一个有确定高度的空白容器。空 src、无效路径、或仅靠 loading="lazy" 都不行。
可靠方案：
- 1×1 透明 GIF：
src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="（43 字节） - 极简 SVG：
src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1' height='1'%3E%3C/svg%3E" - 服务端返回的 placeholder.svg，但必须带明确
width和height
切记：src 必须存在且可解析，data-src 是 JS 加载逻辑用的，浏览器根本不看它。
最易被忽略的一点：所有优化都建立在「浏览器首次解析 HTML 时就能拿到尺寸信息」这个前提上。一旦动态插入、JS 渲染、或父容器干扰检测，整个响应式加载链路就从源头失效——这时候再调 sizes 或换格式，都补不回那 300ms 的决策窗口。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
