首屏闪动主因是浮动致父容器高度塌陷为0，图片加载后突撑开布局；须同步用display:flow-root创建bfc并配合aspect-ratio或padding-top预留空间，且关键css必须内联。
首屏闪动不是图片加载慢导致的，而是浮动让父容器高度塌陷为 0，图片就绪后突然撑开布局——这个跳变在首屏最刺眼。必须同时解决“塌陷”和“占位”两个问题，缺一不可。
为什么 display: flow-root + aspect-ratio 还是会闪
常见错误是只加了 display: flow-root，但没验证它是否真生效。Android 4.4–5.1、部分定制 ROM（如旧版 MIUI/EMUI）根本不支持该声明；Edge 110–125 在 float + scroll-snap 场景下也会调度失步，getBoundingClientRect() 值在帧间波动，导致合成层反复重定位。
- 运行时检测：
getComputedStyle(container).display === 'flow-root'返回'block'就说明失效 - UA 检测到
Android 4\.4|wv时，直接回退到overflow: hidden+::after清除 -
aspect-ratio必须作用于已 BFC 化的容器，否则浏览器压根不计算比例 - Edge 115 前版本对
aspect-ratio解析不稳定，需 fallback 到padding-top: 56.25%+position: relative/absolute
padding-top 占位为何总失效
padding-top: 56.25% 看似简单，但实际极易写错：百分比值以父容器宽度为基准，一旦父容器宽度算出来是 0（比如还没触发 BFC），结果就是 0px，占位彻底失败。
- 必须确保父容器已 BFC 化（
display: flow-root或overflow: hidden），否则padding-top无参照 - 图片容器设
position: relative，图片本身设position: absolute; inset: 0; width: 100%; height: 100%，漏掉inset: 0图片会被 padding 顶到下方 - 删掉
<img>标签里的width和height属性——它们干扰响应式，且现代浏览器已不靠它推算宽高比 - 务必加
object-fit: cover，否则图片拉伸变形，看起来像“闪”其实是错位
loading="lazy" 和首屏闪的关系
loading="lazy" 只控制加载时机，不管占位。首屏图加了它，等于主动放弃首帧稳定性——滚动进视口前高度是 0，一出现就撑开，闪得更剧烈。
- 首屏关键图坚决不加
loading="lazy"，可加fetchpriority="high"提升加载优先级 - 非首屏图加 lazy 前，必须确保其容器已有稳定高度（BFC +
aspect-ratio或padding-top） - Vite 等构建工具默认不解析
srcset中的相对路径，上线后 404 会导致 fallback 到单张大图，反而加剧闪烁——这点最容易被忽略
内联关键 CSS 是防闪底线，不是可选项
哪怕你把所有浮动、占位、GPU 加速都写对了，如果首屏样式没内联，浏览器首次绘制时根本没拿到规则，必然 FOUC（Flash of Unstyled Content）。这不是优化项，是必须填的坑。
- 用
<style></style>标签写在最顶部，早于任何<script></script>或<link> - 体积 ≤10KB（gzip 前），否则反向阻塞 HTML 解析
- 禁用
media属性（如media="(min-width:768px)"），否则浏览器跳过阻塞逻辑 - 用
critters（Vite 插件）或critical（CLI）自动生成，别手动维护——样式一改，内联块就失效
真正容易被忽略的是：浮动塌陷和图片占位必须同步解决，而内联关键 CSS 是这一切的前提。三者缺一，首屏闪动就无法根治。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
