最新骨架屏方案梳理
什麼是骨架屏
骨架屏是預渲染機制中一種增強使用者體驗的方式，可以了解為是當資料還未加載進來前，頁面的一個空白版本，一個簡單的關鍵渲染路徑。可以看一下下面 Facebook 的骨架屏實作，可以看到在頁面完全渲染完成之前，使用者會看到一個樣式簡單，描繪了目前頁面的大緻架構的骨架屏頁面，然後骨架屏中各個占位部分被實際資源完全替換，這個過程中使用者會覺得内容正在逐漸加載即将呈現，降低了使用者的焦躁情緒，使得加載過程主觀上變得流暢。
可以看一下下面的示例圖，第一個為骨架屏，第二個為菊花圖，第三個為無優化，可以看到相比于傳統的菊花圖會在感官上覺得内容出現的流暢而不突兀，體驗更加優良
生成骨架屏的方式
- 手寫 HTML、CSS 的方式為目标頁定制骨架屏 做法可以參考<Vue 頁面骨架屏注入實踐>，主要思路就是使用 vue-server-renderer 這個本來用于服務端渲染的插件，用來把我們寫的.vue 檔案處理為 HTML，插入到頁面模闆的挂載點中，完成骨架屏的注入。這種方式不甚文明，如果頁面樣式改變了，還得改一遍骨架屏，增加了維護成本。骨架屏的樣式實作參考 CodePen 使用圖檔作為骨架屏；簡單暴力，讓 UI 同學花點功夫吧哈哈；小米商城的移動端頁面采用的就是這個方法，它是使用了一個 Base64 的圖檔來作為骨架屏。
- vue-skeleton-webpack-plugin （預渲染插件）它将插入骨架屏的方式由手動改為自動，原理在建構時使用 Vue 預渲染功能，将骨架屏元件的渲染結果 HTML 片段插入 HTML 頁面模版的挂載點中，将樣式内聯到 head 标簽中。這個插件可以給單頁面的不同路由設定不同的骨架屏，也可以給多頁面設定，同時為了開發時調試友善，會将骨架屏作為路由寫入 router 中，可謂是相當體貼了。
- 自動生成并自動插入靜态骨架屏 這種方法跟第一種方法類似，不過是自動生成骨架屏，可以關注下餓了麼開源的插件 page-skeleton-webpack-plugin ，它根據項目中不同的路由頁面生成相應的骨架屏頁面，并将骨架屏頁面通過 webpack 打包到對應的靜态路由頁面中，不過要注意的是這個插件目前隻支援 history 方式的路由，不支援 hash 方式，且目前隻支援首頁的骨架屏，并沒有元件級的局部骨架屏實作，作者說以後會有計劃實作(issue9)。
- 一個骨架生成工具dps(draw-page-structure),可以自動生成骨架節面，不過本人在 vue 項目中路由為 hash 的模式下，沒有真正生成。
最終作者在自己的項目中使用了 vue-skeleton-webpack-plugin 來實作骨架螢幕，綜合所有方案的對比請大家參考下圖
------------------------------------個人項目-----------------------------------
項目介紹
- 項目位址：www.ffbig.cn/ 項目來源于部落客自己的職業生涯技能總結和梳理，内容在不斷充實中。 全棧大前端系列總共分為 3 期：
- 1 期梳理基礎知識和常用技術棧
- 2 期學習跨端融合技術認識"大前端"
- 3 期結合服務端技術通曉 "全棧"
項目大綱
如果你發現本項目有内容上的錯誤，歡迎送出 issues 進行指正。
學習交流
建了一個“全棧大前端”的微信交流群，歡迎純粹技術交流愛好者加入！