骨架屏不提升实际速度但能优化主观加载感知，需服务端内联渲染、像素级对齐真实结构、用background-position实现流光动画、加载完成必须remove()节点。
骨架屏本身不加快任何网络或渲染速度，但它能显著提升用户对加载速度的主观感知——前提是结构精准、动画克制、时机得当。
骨架屏必须在首屏 HTML 中内联渲染
如果骨架是 JS 动态插入的，用户会经历「白屏 → 骨架 → 闪动 → 内容」四阶段，比纯白屏更糟。真实体验优化的前提，是骨架元素从服务端直接输出到初始 HTML 中。
- SSR/SSG 场景下，把
<div class="skeleton-title"></div>直接写进<div id="app"> 内，而非靠客户端 JS 拼接 <li>禁用类似 <code>document.querySelector('#app').appendChild(skeleton)的客户端注入逻辑 - Vue/React 中避免在
onMounted或useEffect里才创建骨架；应确保骨架 DOM 在水合（hydration）前就存在 - 不用
width: 100%+height: 2em模拟文字行——em值随字体变化浮动，而真实标题可能用了font-size: 1.25rem+line-height: 1.4 - 真实卡片若设了
aspect-ratio: 16/9，骨架对应容器也必须写死相同值，不能靠padding-top: 56.25%估算 - 头像若为
border-radius: 50%+width: 48px，骨架<div class="skeleton-avatar"> 就得严格匹配这两个值 <h3>CSS 动画要用 background-position 位移模拟流光</h3> <p>opacity 或 transform 动画只是闪烁或滑动，缺乏“正在加载”的质感；且部分 iOS Safari 对 filter 或复杂 transform 有渲染抖动。</p> <ul> <li>核心动画必须基于 <code>background-image: linear-gradient()+background-position位移 - 推荐动画时长：1.8s–2.2s；
@keyframes shine的from和to必须覆盖完整位移周期，避免卡顿感 - 深色模式下，别硬编码
#f0f0f0；改用 CSS 变量如--skeleton-bg: var(--color-surface)，并随主题动态更新 - 切换真实内容时，必须调用
skeletonEl.remove()，而非隐藏 - 若骨架由 Web Component 渲染，确保
disconnectedCallback中清除所有requestAnimationFrame或定时器 - 禁止在骨架 DOM 上挂载事件监听器或绑定数据引用，否则容易引发内存泄漏
结构尺寸必须与真实内容像素级对齐
骨架和真实内容之间哪怕 1px 的高度差或 0.1em 的行高偏移，都会触发浏览器重排（reflow），造成肉眼可见的“跳动”，直接抵消骨架带来的心理优势。
加载完成必须彻底 remove() 骨架节点
仅用 display: none 或 visibility: hidden 隐藏骨架，会导致 @keyframes 动画持续运行，长期驻留影响页签性能，尤其在 SPA 中反复进出同一页面时。
最易被忽略的点不是动画多炫，而是骨架 DOM 是否真正与最终内容在 layout、paint、composite 三个阶段完全对齐——错一帧，用户就感知为“卡”；差 1px，就判定为“不专业”。
