自動生成跨多端骨架屏

概念以及背景

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砸我吧。