Skeleton骨架屏实战经验分享从原理到优化一步步搞定

为什么我要对比这几个Skeleton骨架屏方案

最近在好几个项目里都用到了Skeleton骨架屏，主要是为了解决页面加载时的空白问题。这玩意儿其实挺重要的，尤其是对那些需要从后端拉取大量数据的页面来说，用户等待的时间越长，用户体验就越差。所以，我决定对比一下目前主流的几个Skeleton骨架屏方案，看看哪个更符合我的需求。

纯CSS方案：简单直接，但灵活性有限

首先说说纯CSS方案吧。这个方案最大的优点就是简单直接，几乎不需要写什么JavaScript代码，只需要一些基本的HTML和CSS就能搞定。

<div class="skeleton">
  <div class="skeleton__header"></div>
  <div class="skeleton__body">
    <div class="skeleton__text"></div>
    <div class="skeleton__text"></div>
    <div class="skeleton__text"></div>
  </div>
</div>

.skeleton {
  width: 100%;
  background-color: #f0f0f0;
}

.skeleton__header {
  height: 50px;
  margin-bottom: 20px;
  background-color: #e0e0e0;
}

.skeleton__body .skeleton__text {
  height: 20px;
  margin-bottom: 10px;
  background-color: #e0e0e0;
}

这个方案的好处是真的很简单，基本上就是复制粘贴就能用起来。但是，缺点也很明显，那就是灵活性太低了。如果你的页面结构稍微复杂一点，或者需要动态调整骨架屏的样式，就有点力不从心了。而且，每次修改样式都要手动去改CSS，有点麻烦。

React库方案：灵活且功能强大，但学习成本高

接下来是React库方案，比如react-content-loader。这个方案的特点是灵活性很高，而且提供了很多强大的功能，比如动画效果、动态生成等。

import ContentLoader from 'react-content-loader';

const Skeleton = () => (
  <ContentLoader>
    <rect x="0" y="0" rx="5" ry="5" width="100%" height="50" />
    <rect x="0" y="70" rx="5" ry="5" width="100%" height="20" />
    <rect x="0" y="100" rx="5" ry="5" width="100%" height="20" />
  </ContentLoader>
);

这个方案的优点是真的很强大，你可以通过SVG来定义骨架屏的形状，还可以加上各种动画效果。而且，React组件化的特性使得它很容易集成到现有的React项目中。不过，缺点也很明显，就是学习成本比较高。如果你不是React开发者，或者你的项目不是用React写的，那么这个方案可能就不太合适了。

Vue库方案：介于两者之间，适合大多数场景

最后是Vue库方案，比如vue-content-loading。这个方案在我看来是介于纯CSS和React库之间的，既有一定的灵活性，又不会太难上手。

<template>
  <content-loading :width="400" :height="200" :speed="2" primary="#f3f3f3" secondary="#ecebeb">
    <rect x="0" y="0" rx="4" ry="4" width="100%" height="50" />
    <rect x="0" y="70" rx="4" ry="4" width="100%" height="20" />
    <rect x="0" y="100" rx="4" ry="4" width="100%" height="20" />
  </content-loading>
</template>

<script>
import ContentLoading from 'vue-content-loading';

export default {
  components: {
    ContentLoading
  }
};
</script>

这个方案的好处是既有一定的灵活性，又能很好地集成到Vue项目中。而且，它的API设计得也比较友好，上手相对容易。当然，缺点也不是没有，比如说它的社区支持和文档可能不如React库那么完善，有时候遇到问题可能需要自己多折腾一会儿。

谁更灵活？谁更省事？

总的来说，我觉得这三个方案各有优劣，具体选哪个还是要看你的项目需求和技术栈。如果是一个简单的静态页面，纯CSS方案已经足够用了；如果是复杂的React项目，那react-content-loader肯定是个不错的选择；而对于Vue项目，我会推荐使用vue-content-loading。

我自己比较倾向于使用Vue库方案，因为我的很多项目都是用Vue写的，而且这个方案的灵活性和易用性都很适中，能很好地满足我的需求。当然，这只是我个人的看法，如果你有不同意见，欢迎在评论区交流。

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

性能方面，我也做了一些简单的测试。纯CSS方案由于没有JavaScript的参与，性能是最好的，几乎没有任何额外开销。React库方案虽然功能强大，但在性能上确实会有一些损耗，尤其是在动画效果较多的情况下。Vue库方案的性能介于两者之间，总体来说还不错。

当然，这些性能差异在实际项目中可能并不是非常明显，除非你的页面非常复杂或者需要处理大量的数据。所以在选择方案时，性能可以作为一个参考因素，但不必过于纠结。

我的选型逻辑

最后说说我的选型逻辑吧。我一般会根据项目的具体情况来选择合适的方案。如果是一个简单的静态页面，我会毫不犹豫地选择纯CSS方案，因为它简单直接，维护起来也方便。如果是React项目，那我会优先考虑react-content-loader，因为它功能强大，而且能很好地集成到现有的React生态中。至于Vue项目，我会首选vue-content-loading，因为它既能满足我的需求，又能很好地融入Vue项目。

总之，没有绝对完美的方案，只有最适合你当前项目的方案。希望我的经验对你有所帮助，如果有更好的建议或者不同的看法，欢迎在评论区交流。