骨架屏的核心作用是提升用户感知性能——用模拟真实内容布局的视觉占位符替代空白等待，降低加载焦虑；它比loading图标更能建立界面认知，需通过请求前插入、请求后替换实现，并注重结构准确、动画克制与切换干净。
骨架屏（Skeleton）在 JavaScript 异步数据加载中，核心作用是提升用户感知性能——用视觉占位符替代空白等待，让界面“看起来正在工作”，降低用户对加载延迟的焦虑。
为什么不用 loading 图标而选骨架屏
纯 loading 动画（如旋转圈）只告诉用户“还在加载”，但不提供结构预期；骨架屏则模拟真实内容的布局、层级和大致尺寸（比如头像圆角、标题行宽、段落长度），让用户提前建立界面认知。尤其在列表、卡片、详情页等结构化内容场景下，骨架屏比全局遮罩+文字提示更自然、干扰更小。
如何用 JS 动态插入骨架屏
关键是在请求发起前渲染骨架，请求完成后再替换为真实 DOM。推荐轻量实现，避免引入 UI 框架依赖：
- 用 HTML 字符串或 template 标签预定义骨架结构（如
<div class="skeleton-card"><div class="skeleton-avatar"></div><div class="skeleton-title"></div></div>） - 请求前清空容器并插入骨架元素：
container.innerHTML = skeletonHTML - fetch 或 axios 成功后，用真实数据生成 DOM，再一次性替换整个容器内容（或用
replaceWith()精准替换） - 注意：避免边请求边渐进渲染骨架（如逐条插入），否则可能造成重排重绘，反而影响性能
样式要点：让骨架屏真正“像内容”
骨架屏不是灰色方块堆砌，需还原真实 UI 的节奏感：
立即学习“Java免费学习笔记（深入）”；
- 用 linear-gradient + animation 实现“扫描光效”（从左到右淡入淡出），比静态灰块更有动态感
- 保持与真实组件一致的 border-radius、margin、padding 和宽高比例（例如头像用 40×40 圆角，标题用 60% 宽度，段落用三行不等长灰条）
- 避免使用纯 #e0e0e0 —— 推荐浅灰（#f5f5f5）背景 + 更浅灰（#f0f0f0）区块，增强层次
- 响应式场景下，骨架结构需跟随断点变化（如移动端单列骨架、桌面端双列）
进阶：服务端渲染（SSR）中配合骨架屏
若项目使用 Next.js、Nuxt 等支持 SSR 的框架，可进一步优化首屏体验：
- 服务端返回带骨架结构的 HTML（即“骨架优先”），客户端 hydration 前就可见占位内容
- 用 useEffect / mounted 钩子触发数据请求，加载完成后更新状态，触发真实内容渲染
- 注意避免水合 mismatch：骨架 DOM 结构必须与后续真实 DOM 的根节点类型、key、class 保持兼容（例如都用
<div class="card">包裹）
骨架屏不是炫技，而是对用户注意力节奏的尊重。它不减少请求时间，但能显著缩短“感觉慢”的时间。只要结构准确、动画克制、切换干净，一次简单的 innerHTML 替换就能带来真实的体验升级。
