应使用 aspect-ratio: 16 / 9 预留图片空间以防止内容抖动，现代浏览器直接支持，旧版 safari 需兼容处理。
图片加载前就预留空间，别等渲染完再算尺寸
内容抖动最常见原因是图片、字体或 iframe 加载后突然撑开容器，导致下方元素跳位。核心不是“等它加载完再显示”，而是“提前告诉浏览器这个位置有多大”。
-
aspect-ratio: 16 / 9是首选——现代浏览器（Chrome 88+、Firefox 89+、Safari 15.4+）直接支持，一行代码搞定容器比例 - 兼容旧 Safari（height: 0 +
padding-bottom: 56.25%+position: relative，内部子元素用position: absolute填满 - 别只给
<img>设max-width: 100%，它不防抖动；必须作用在父容器上，或给<img>显式设width和height属性（如width="600" style="max-width:90%"）
字体加载期间文字不跳动，swap 比 block 更稳妥
Web 字体没加载完时，浏览器默认会先隐藏文字（font-display: block），等字体就绪才显示——这会造成整段文字突然弹出，就是抖动。
- 改用
font-display: swap：先用系统字体渲染，字体加载完后无感替换，视觉连续 - 避免在
@font-face中漏写font-display，尤其自托管字体；CDN 字体（如 Google Fonts）默认已是swap - 如果必须用
block（比如品牌字体强一致性要求），配合font loading API手动控制显示时机，而不是靠 CSS 等待
Flex/Grid 容器里图片塌陷，min-width: 0 往往被忽略
用 display: flex 并排图片时，偶尔某张图变细、错位甚至换行异常，大概率是 Flex item 默认的 min-width: auto 在作祟——它会阻止图片缩小到比内容更小，导致布局卡死。
- 给图片加
min-width: 0，解除这个隐式限制 - 同时确保父容器有
flex-wrap: wrap（默认值），否则窄屏下会横向溢出而非折行 - 如果图片需填满固定区域（如卡片封面），容器必须设明确宽高或
aspect-ratio，否则object-fit无效
懒加载图片触发抖动，rootMargin 和 threshold 要调准
用 IntersectionObserver 实现懒加载时，图片刚进入视口就触发加载，但还没渲染完成，容器高度仍为 0，就会闪一下再撑开。
- 扩大
rootMargin，比如'0px 0px 200px 0px'，让图片提前 200px 开始加载，留出下载和解码时间 -
threshold: 0.1比0更稳——表示 10% 进入视口就触发，不是非要像素级贴边 - 即使用了懒加载，仍要保留
load和error事件监听，给<img>加loaded类来触发动画，不能只靠 observer
aspect-ratio、font-display、min-width: 0、rootMargin）必须在 HTML 解析阶段就生效，而不是等 JS 执行后再补。一旦 DOM 树构建完成、首次绘制发生，再补就来不及了。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
