加载状态与骨架屏

问题

如何优雅地处理数据加载状态，提升用户体验并避免布局抖动 (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. 图片比例预占位

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

.img-container {
  position: relative;
  width: 100%;
  height: 0;
  padding-top: 56.25%; /* 9 / 16，兼容旧 WebView */
  background: #f0f0f0;
}

面试关键点

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