js动态插入骨架屏拖慢fcp，因其纯css灰色块非文本/图片等可绘制内容，且插入时机晚于html解析，导致浏览器首帧仍白屏；唯有服务端直出含内联关键样式、结构扁平、带base64图片的静态html片段，才能避免拖慢fcp。
服务端直出的静态骨架 HTML 才能真正缩短首屏感知时间；JS 动态渲染骨架屏不仅不加速，反而延长白屏、拖慢 FCP、引发 hydration 不一致问题。
为什么 JS 动态插入骨架屏会拖慢 FCP
FCP 只认真实可绘制内容：文本节点、<img>（含 data URI）、<svg></svg> 中的 <image></image>、<canvas></canvas>。纯 CSS 背景色 + 多层 <div> 不算内容，浏览器解析时直接跳过。
<ul>
<li>骨架节点在 <code>mounted 或 useEffect 里才插入 → 等 JS 下载执行完才出现 → 首屏仍白屏 1.2s+
<div class="skeleton-card"><div><div>...</div></div></div>）→ HTML 解析耗时上升 30–80ms服务端直出骨架 HTML 的硬性要求
骨架必须是 SSR/SSG 构建阶段就写死在响应 HTML 里的片段，且结构、class、宽高比例与真实 DOM 完全对齐，否则 hydration 后会重绘或闪动。
- 用
data-skeleton="true"标记骨架节点，例如：<div data-skeleton="true" class="article-list"></div> - 图片占位统一用
<img src="data:image/svg+xml,%3Csvg...">，不触发 HTTP 请求 - 所有样式必须内联进
<style></style>，禁用@import和未支持的@media查询（iOS 14.5 以下不解析部分 media 规则） - 避免伪元素动画（
::before+background: linear-gradient）→ GPU 加速失效，低端安卓卡顿
critical CSS 内联怎么控制体积不超 1KB
内联超过 1KB 的 CSS 会显著拉长 TTFB 和初始解析时间，尤其在 3G 弱网下；只保留首屏 DOM 节点必需的规则，其他全扔外链。
- 用
critters（Vite 插件）或penthouse（CLI 工具）自动提取首屏用到的选择器，别手写 - 登录页只需内联
.logo、.input、.btn-primary的尺寸/颜色/圆角，去掉所有:hover、主题色变量、响应式断点 - 检查内联
<style></style>是否含重复规则或未压缩空格——Webpack 构建后需加cssnano压缩 - 验证方式：打开 DevTools → Elements → 查看
里<style></style>标签内容长度，右键 → “Copy element” → 粘贴到编辑器看字节数
预渲染（Prerendering）适用边界在哪
预渲染只对静态或低频更新页面有效；一旦页面依赖实时用户态、地理位置、个性化推荐，预渲染输出的内容大概率错误，还得二次 hydration 降级，得不偿失。
- 适合场景：文档页、博客列表、产品介绍页（构建时数据已确定）
- 危险信号：HTML 里出现
user.name、geo.city、recommend.items等运行时变量 → 别预渲染 - 若必须用，确保 fallback 逻辑健壮：预渲染 HTML 中骨架节点带
data-prerendered="true"，客户端 JS 检测到该属性后，立即发起 API 获取真实数据并 patch DOM，而非整页替换 - 注意：预渲染生成的 HTML 无法缓存 CDN，每次构建都生成新文件，需配合版本哈希或 cache-control max-age=3600
最容易被忽略的点是：骨架结构和真实 DOM 的 class 名、层级、宽高比例必须严格一致。哪怕只是 .card 和 .post-card 差一个单词，hydration 时 React/Vue 就可能销毁重挂，导致骨架一闪而过、内容延迟出现。
