Skeleton骨架屏实现原理与性能优化全解析

骨架屏这事儿，为啥我非得比对这几个方案

最近在做项目的时候，碰到了一个需求：页面加载太慢，用户看着白屏等得不耐烦。产品经理跑过来跟我说，能不能加个骨架屏，给用户一点心理预期。说实话，这个需求挺常见，但具体实现方案还真有好几种。最开始我想随便找个现成的库用一下，结果发现每个方案都有自己的特点和坑点，最后干脆自己做了几个对比。

我主要对比了三种方案：

• 纯CSS手写骨架屏
• React组件化实现（以react-loading-skeleton为例）
• 服务端渲染的骨架屏

这三种方案各有优劣，踩了不少坑，也折腾了好几天，下面就来聊聊我的实际体验。

谁更灵活？谁更省事？

先说结论：如果项目简单、页面固定，我更喜欢用纯CSS手写骨架屏；如果项目复杂、组件化程度高，我会选择React组件化实现；至于服务端渲染的骨架屏，虽然看起来很高级，但实际上适用场景有限。

纯CSS手写骨架屏

纯CSS手写骨架屏是最基础的方案，适合那些不想引入额外依赖的小项目。代码也很简单，比如：

<div class="skeleton">
  <div class="skeleton-header"></div>
  <div class="skeleton-content"></div>
</div>

<style>
  .skeleton {
    width: 100%;
    height: 100%;
    background-color: #f0f0f0;
    border-radius: 8px;
    overflow: hidden;
    position: relative;
  }
  .skeleton::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
    animation: shimmer 2s infinite;
  }
  @keyframes shimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
  }
</style>

这种方案的好处是完全可控，你可以根据设计稿调整骨架屏的样式，想怎么改就怎么改。不过缺点也很明显，就是手动维护成本高。如果页面结构变了，你得重新调整CSS，而且对于复杂的动态内容，这种方式会显得力不从心。

React组件化实现

第二种方案是使用现成的React组件库，比如react-loading-skeleton。它的用法非常简单：

import Skeleton from 'react-loading-skeleton';
import 'react-loading-skeleton/dist/skeleton.css';

function UserProfile() {
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    setTimeout(() => setLoading(false), 3000); // 模拟数据加载
  }, []);

  return (
    <div>
      {loading ? (
        <div>
          <Skeleton height={40} />
          <Skeleton height={20} />
          <Skeleton height={60} />
        </div>
      ) : (
        <div>
          <h1>用户名</h1>
          <p>用户简介</p>
        </div>
      )}
    </div>
  );
}

这个方案的优点是灵活性高，可以根据组件的状态动态控制骨架屏的显示。而且它自带动画效果，不用像纯CSS那样手动写keyframes。不过也有缺点，那就是性能开销稍微大一些，尤其是当你在一个页面上大量使用骨架屏时，可能会导致渲染卡顿。

服务端渲染的骨架屏

第三种方案是服务端渲染的骨架屏，也就是在服务器端直接生成HTML骨架屏代码。这种方案听起来很高大上，但实际操作起来有点麻烦。你需要在服务端提前渲染好骨架屏，然后通过接口返回给前端。举个例子：

// 假设这是你的服务端代码
app.get('/api/page', (req, res) => {
  const skeletonHtml = 
    <div class="skeleton">
      <div class="skeleton-header"></div>
      <div class="skeleton-content"></div>
    </div>
  ;
  res.send({ html: skeletonHtml });
});

这种方案的优点是首屏加载速度快，因为用户看到的骨架屏是直接从服务器端返回的，不需要前端再渲染。但问题在于，开发和维护成本太高。你需要在服务端和前端之间协调，还要处理各种边界情况，比如骨架屏样式和真实内容不一致的问题。

性能对比：差距比我想象的大

性能这块我也做了一些测试。在简单的页面上，三种方案的性能差距不大，基本可以忽略。但在复杂的页面上，纯CSS方案的性能是最好的，因为它没有额外的JavaScript开销。React组件化实现次之，而服务端渲染的方案性能反而最差，主要是因为服务端需要额外的计算资源。

这里提醒一下：如果你的项目是SSR（服务端渲染），服务端骨架屏可能是个不错的选择，但如果是普通的CSR（客户端渲染），我建议别折腾。

我的选型逻辑

总结一下我的选型逻辑：

• 简单项目：纯CSS手写骨架屏，简单粗暴，维护成本低。
• 中大型项目：React组件化实现，灵活性高，适合动态内容。
• 特殊场景：服务端渲染的骨架屏，适合对首屏性能要求极高的项目，但要慎重。

我自己平时用得最多的是React组件化实现，因为它确实省事，尤其是配合一些状态管理工具（比如Redux或MobX），可以很方便地控制骨架屏的显示和隐藏。

以上是我的对比总结，有不同看法欢迎评论区交流

骨架屏这个东西，看似简单，但实际用起来还是有不少门道的。每种方案都有自己的适用场景，关键还是要看你的项目需求和团队技术栈。以上是我踩坑后的总结，希望对你有帮助。如果还有其他更好的实现方式，欢迎在评论区分享！