自动生成跨多端骨架屏

概念以及背景

Skeleton Screen,中文称之为骨架屏。表示在页面数据没有加载完成以前，用一些简单的图形描绘页面内容的大体布局，让用户感知页面正在加载；当数据加载完成后，用真实的数据渲染页面，把它替换掉。

在骨架屏诞生以前，业界大多数都是用菊花图之类的loading效果去作数据等待期的加载效果展现，可是这种效果对于用户体验却未必优秀，当用户聚焦于菊花图时，就像学生盯着下课前的5分钟，感知上时间会变慢，很容易滋生焦躁情绪，若是是弱网状况下可能用户直接就关闭页面了。

若是咱们能在页面真实内容呈现以前先把页面内容的轮廓展现出来，而后再逐步展现真正的内容，这样既能给用户一种内容正在被加载即将呈现出来的期待，也能下降用户等待过程当中的焦躁情绪，同时还能使页面加载的过程变得更加丝滑，感官上会更加天然流畅，而骨架屏就是为此而生。

如何生成骨架屏

要生成骨架屏，咱们能够怎么作呢？
答案一：手写骨架屏代码，这种方案可能你们的反应是下面这样

答案二：自动生成？

自动生成骨架屏看起来彷佛很难作到，主要困难点在于：

• 页面真实内容结构难以自动获取

• 若是拿到了页面结构，如何根据页面结构生成骨架屏的节点和样式

这两个问题目前采用一些前端技术其实也能够解决，我写了一个webpack插件skeleton-webpack-plugin能够实如今你本地运行dev server预览页面的时候生成该页面骨架屏的html与css，整体思路以下图所示：

可是到这里咱们只是生成了在h5环境可使用的骨架屏，回到咱们的主题，咱们想要的是跨多端哦，也就是说iOS，android,小程序等等我全都要，这个又该如何实现呢？

skeleton-weex-plugin

目前咱们团队内部在weex的基础上开发了一套跨端开发框架，借助这套框架咱们能够基本实如今iOS，android，小程序等多端实现一套代码复用，可是目前还没有开源，因此我先借用weex做为跨多端的技术实现以及vue做为dsl，若是你的团队也是采用类weex技术方案，那么你能够直接复用个人代码。

对于生成多端骨架屏的问题，个人解决方案是skeleton-weex-plugin,它是skeleton-webpack-plugin的一个插件。
如前所述，skeleton-webpack-plugin能够生成对应页面骨架屏的html与css，那么进一步思考，若是咱们能够将这份html与css转化成weex的代码，这样就能够实如今一套骨架屏在多端均可以呈现。skeleton-weex-plugin的实现思路以下图所示：

它会在你对应的页面目录下生成一个skeleton.vue的文件，以下所示：

<template>
<div v-if="isShow" class="skeleton-wrapper">
<div>skeleton content</div>
</div>
</template>
<script>
export default {
  name: "Skeleton",
  props: {
    isShow: {
      type: Boolean,
      default: false
    }
  }
}
</script>
<style scoped>
skeleton style content
</style>
复制代码

这样你就能够把它当成组件来引用，并控制它的显示和隐藏。能够来看下小桔养车首页转化出来的一个效果图：

能够说类似度仍是比较高的。这样彷佛能够坐下来喝杯红酒了：

可是这样就完美了么？

后续的优化之路

虽然咱们初步达成了预期的实现目标，可是还存在几个比较重要的问题。

• h5页面仍是会有白屏时间，由于这种方式在js bundle加载完成前仍是展现的空白页。

  这个问题的解决思路是你能够将骨架屏的html与css直接打到静态的页面模版html上，而后在js bundle加载完成后删除该节点

• 引入的骨架屏组件会致使js bundle体积增大。

  目前我在生成weex代码过程当中已经作了不少的精简工做，好比只生成在viewport可见区域内元素的骨架屏，删除一些没必要要的样式等，后续也会看看是否还有能够继续精简的代码。

• native端渲染时在页面 js bundle加载完成前页面也会是白屏。

  这个问题的解决思路是能够用骨架屏的预览页截屏生成一张图片，而后native端在js bundle加载完成前展现这张图片便可填充白屏时间。

因此，咱们还能也必须能够作的更好

这里是利用weex实现了跨多端的诉求，可是若是要拓展到其余技术栈其实本质思想也是同样，只须要将骨架屏的html与css抽象语法树转化成对应技术栈的实现便可，即便生成纯native的代码也并不是不能作到，欢迎你们去贡献插件。

相关代码

• skeleton-webpack-plugin

• skeleton-weex-plugin

若是喜欢请用star砸我吧。