#加载状态与骨架屏

#问题

如何优雅地处理数据加载状态，提升用户体验并避免布局抖动 (CLS)？

#解决方案

#1. 骨架屏

骨架屏是目前主流的加载占位方案，它比传统的 Loading Spinner 体验更好。

• 作用：让用户感知页面的大概结构，产生“马上就能看到内容”的预期。
• 防止抖动：提前撑开容器高度，避免数据加载回来后页面高度突变 (CLS 优化)。
• 实现：通常使用灰色背景块 + CSS 动画（扫光效果）。

.skeleton {
  background-color: #eee;
  background-image: linear-gradient(
    90deg, 
    #eee 0px, 
    #f5f5f5 40px, 
    #eee 80px
  );
  background-size: 600px;
  animation: shine 1.6s infinite linear;
}

@keyframes shine {
  0% { background-position: -100px; }
  40%, 100% { background-position: 140px; }
}

#2. UI 状态管理

• Loading：首次加载，显示骨架屏。
• Empty：数据为空，显示占位图（如“暂无数据”）。
• Error：请求失败，显示重试按钮。
• Success：展示真实内容。

#3. 图片预占位 (Aspect Ratio)

对于图片流，必须提前锁定宽高比，否则图片加载出来会把下方内容挤下去。

.img-container {
  aspect-ratio: 16 / 9; /* 现代浏览器原生支持 */
  background: #f0f0f0;
}

#面试关键点

1. CLS (Cumulative Layout Shift)：Core Web Vitals 指标之一。骨架屏是解决 CLS 的重要手段。
2. 用户心理：骨架屏比旋转的菊花（Spinner）更能减少用户的焦虑感。