直接结论：用aspect-ratio配合块级容器占位最可靠，因浏览器需提前预留空间防重排抖动；必须用块级容器包裹img、设width和aspect-ratio、禁用height、img设width:100%和object-fit，旧版safari需padding-top降级。
直接结论：用 aspect-ratio 配合块级容器占位，比写 width/height 属性或靠 position: absolute 更可靠、更少出错。
为什么图片加载前会抖动？
浏览器渲染到 <img> 时若没提前知道尺寸，就按 0×0 占位；等图片下载完成，再重排布局——后续文字/按钮突然下移，就是 Layout Shift。这不是“动画卡顿”，是空间没预留导致的强制重排。
常见错误现象包括：
- 首屏轮播图高度先塌缩、再撑开
- 图文混排中文字被顶下去又弹回来
- 广告 iframe 加载后把整页内容往下推
用 aspect-ratio 占位的实操要点
现代浏览器（Chrome 88+、Firefox 89+、Safari 15.4+）已原生支持该属性，它是目前最简洁、语义最清晰的占位方案。
- 必须用块级容器包裹
<img>，例如<div class="img-wrapper"><img></div>；不能直接在<img>上设aspect-ratio（替换元素不响应） - 容器需同时满足：
display: block（或inline-block）、width: 100%（或固定值）、aspect-ratio: 16/9 - 禁止对容器设
height或max-height，否则会覆盖aspect-ratio推导出的高度 -
<img>自身设width: 100%、height: auto，再加object-fit: cover控制缩放 - 别在
<img>标签里写 HTML 的width/height属性（尤其是像素值），它会破坏响应式逻辑，反而加剧跳闪
旧版 Safari / Android WebView 怎么降级？
iOS 15.2 及更早版本不支持 aspect-ratio，需 fallback 到 padding-top 技巧，但上下文必须严格约束：
- 父容器设
position: relative、width: 100%、height: 0、padding-top: 56.25%（对应 16:9） - 图片元素设
position: absolute、top: 0、left: 0、width: 100%、height: 100% - 务必清除旧样式干扰：如果用了
aspect-ratio，降级 CSS 里要显式写padding-top: 0，避免两者叠加导致高度翻倍 - 在
flex或grid子项中使用时，必须加min-width: 0、min-height: 0，否则aspect-ratio或padding-top都会被压缩归零
别漏掉 Layout Instability API 的关键配置
监控抖动不是为了“看热闹”，而是精准定位问题源。很多团队本地测不出 CLS 问题，就是因为 observer 没配对：
- 创建
PerformanceObserver必须带buffered: true，否则首屏抖动条目根本捕获不到 - 过滤逻辑必须写成
if (!entry.hadRecentInput) { clsAccumulator += entry.value }，漏掉取反会把分数算错好几倍 -
sources[0]?.node是定位抖动根源的唯一可靠线索——它大概率就是那个没设尺寸的<img>、<iframe></iframe>或第三方容器 - 如果
node是#document或null，说明抖动来自跨域 iframe，得去 Network 面板查它的加载时机是否晚于主体内容
真正容易被忽略的是：无论用哪种占位方案，都得配合 html{ overflow-y: scroll } 防滚动条抖动，以及确保关键 CSS 内联、非关键 CSS 用 preload+onload 加载——单靠一个 aspect-ratio 解不了全部问题。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
