骨架屏必须内联到<head>中，否则SSR首屏会闪白；因外链CSS加载延迟导致先白屏→突显灰色块→再替换成真实内容，弱网下可达300ms。
骨架屏必须内联到 <head> 里，否则 SSR 或首屏直出时会闪白——CSS 文件加载延迟会让用户看到空白或抖动。
为什么不能外链 skeleton 样式
服务端渲染吐出的 HTML 是纯文本，浏览器解析完立刻尝试渲染。如果 .skeleton 类定义在外部 CSS 中，样式表还没下载完，DOM 就已挂载，结果就是：先白屏 → 突然出现灰色块 → 再替换为真实内容。这个过程在弱网下可能长达 300ms。
-
@import比<link>更慢，会阻塞并串行加载，绝对不用 - Next.js / Nuxt 的
<Head>默认不内联，需显式配置script: { strategy: 'beforeRender' } - 构建工具如
html-webpack-plugin可通过inject: 'head'+templateParameters注入内联<style>
怎么写最小可行的内联骨架样式
只保留结构尺寸、渐变背景、扫光动画、显隐控制四要素。禁用 CSS 变量、嵌套、@media 查询——它们在内联场景难维护，且旧版 Safari 不支持。
- 用
<style>直接写进<head>，所有关键类加!important防止被后续外链 CSS 覆盖 - 动画名用简短唯一值（如
sh），避免命名冲突 -
background-size必须用px（如300px 100%），iOS Safari 完全不支持rem或vw作为该属性单位
@keyframes sh { from { background-position: -200px 0; } to { background-position: 200px 0; } }
.skeleton { background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%); background-size: 300px 100%; animation: sh 1.5s infinite; }
.skeleton-avatar { width: 40px; height: 40px; border-radius: 50%; overflow: hidden; }
.skeleton-title { width: 60%; height: 20px; margin-top: 12px; border-radius: 4px; }
伪元素方案比额外 DOM 更稳妥
用 ::before 覆盖真实内容，不增加节点、不影响框架 diff，但必须配对控制定位和显隐。
立即学习“前端免费学习笔记（深入）”；
- 容器设
position: relative，伪元素设position: absolute; top: 0; left: 0; right: 0; bottom: 0 - 伪元素
z-index要高于真实内容，且background必须带透明通道（如rgba(255,255,255,0.2)）才能透出底层结构 - 隐藏时别用
display: none（触发重排），也别只靠opacity: 0（仍可点击），推荐组合：visibility: hidden; opacity: 0
最易被忽略的是 background-size 单位和伪元素的 z-index 层级关系——前者在 iOS 上失效会导致光条消失，后者错位会让骨架盖不住内容或完全不可见。
