Vue項目骨架屏注入實踐

相比於早些年先後端代碼緊密耦合、後端工程師還得寫前端代碼的時代，現在已發展到先後端分離，這種開發方式大大提高了先後端項目的可維護性與開發效率，讓先後端工程師關注於本身的主業。然而在帶來便利的同時，也帶來了一些弊端，好比首屏渲染時間(FCP)由於首屏須要請求更多內容，比原來多了更多HTTP的往返時間(RTT)，這形成了白屏，若是白屏時間過長，用戶體驗會大打折扣，若是用戶網速差，則FCP會更長。

由此引伸出一系列的優化方法，骨架屏也所以被提出。

1. FCP優化

在 Google 提出的以用戶爲中心的四個頁面性能衡量指標中，FP/FCP多是開發者們最熟悉的了：

爲了優化首屏渲染時間這個指標，減小白屏時間，前端仔們想了不少辦法：

• 加速或減小HTTP請求損耗：使用CDN加載公用庫，使用強緩存和協商緩存，使用域名收斂，小圖片使用Base64代替，使用Get請求代替Post請求，設置 Access-Control-Max-Age 減小預檢請求，頁面內跳轉其餘域名或請求其餘域名的資源時使用瀏覽器prefetch預解析等；
• 延遲加載：非重要的庫、非首屏圖片延遲加載，SPA的組件懶加載等；
• 減小請求內容的體積：開啓服務器Gzip壓縮，JS、CSS文件壓縮合並，減小cookies大小，SSR直接輸出渲染後的HTML等；
• 瀏覽器渲染原理：優化關鍵渲染路徑，儘量減小阻塞渲染的JS、CSS；
• 優化用戶等待體驗：白屏使用加載進度條、菊花圖、骨架屏代替等；

這裏要介紹的就是優化用戶等待體驗的骨架屏，它能夠被視爲是原來加載菊花圖的一種升級版，結合傳統的首屏優化方法對應用進行優化能夠達到不錯的效果。

2. 骨架屏

骨架屏能夠理解爲是當數據還未加載進來前，頁面的一個空白版本，一個簡單的關鍵渲染路徑。能夠看一下下面Facebook的骨架屏實現，能夠看到在頁面徹底渲染完成以前，用戶會看到一個樣式簡單，描繪了當前頁面的大體框架的骨架屏頁面，而後骨架屏中各個佔位部分被實際資源徹底替換，這個過程當中用戶會以爲內容正在逐漸加載即將呈現，下降了用戶的焦躁情緒，使得加載過程主觀上變得流暢。

能夠看一下下面的示例圖，第一個爲骨架屏，第二個爲菊花圖，第三個爲無優化，能夠看到相比於傳統的菊花圖會在感官上以爲內容出現的流暢而不突兀，體驗更加優良。

現在這項技術已經在Facebook、Google、支付寶、餓了麼、簡書、新浪微博、知乎、美團、領英等公司的產品中被普遍的使用。在論壇和社區也都有很多文章討論骨架屏的實現和使用場景等。

3. 生成骨架屏的方法

生成骨架屏的方式主要有：

1. 手寫HTML、CSS的方式爲目標頁定製骨架屏
   作法能夠參考<Vue頁面骨架屏注入實踐>，主要思路就是使用 vue-server-renderer 這個原本用於服務端渲染的插件，用來把咱們寫的.vue文件處理爲HTML，插入到頁面模板的掛載點中，完成骨架屏的注入。這種方式不甚文明，若是頁面樣式改變了，還得改一遍骨架屏，增長了維護成本。
   骨架屏的樣式實現參考 CodePen
2. 使用圖片做爲骨架屏；
   簡單暴力，讓UI同窗花點功夫吧哈哈；小米商城的移動端頁面採用的就是這個方法，它是使用了一個Base64的圖片來做爲骨架屏。
3. 自動生成並自動插入靜態骨架屏
   這種方法跟第一種方法相似，不過是自動生成骨架屏，能夠關注下餓了麼開源的插件 page-skeleton-webpack-plugin ，它根據項目中不一樣的路由頁面生成相應的骨架屏頁面，並將骨架屏頁面經過 webpack 打包到對應的靜態路由頁面中，不過要注意的是這個插件目前只支持history方式的路由，不支持hash方式，且目前只支持首頁的骨架屏，並無組件級的局部骨架屏實現，做者說之後會有計劃實現(issue9)。

另外還有個插件 vue-skeleton-webpack-plugin，它將插入骨架屏的方式由手動改成自動，原理在構建時使用 Vue 預渲染功能，將骨架屏組件的渲染結果 HTML 片斷插入 HTML 頁面模版的掛載點中，將樣式內聯到 head 標籤中。這個插件能夠給單頁面的不一樣路由設置不一樣的骨架屏，也能夠給多頁面設置，同時爲了開發時調試方便，會將骨架屏做爲路由寫入router中，可謂是至關體貼了。

vue-skeleton-webpack-plugin的具體使用參考 vue-style-codebase，主要關注build目錄的幾個文件，線上Demo 在Chrome的DevTools中把network的網速調爲Gast 3G / Slow 3G就能看到效果了~

---

網上的帖子大多深淺不一，甚至有些先後矛盾，在下的文章都是學習過程當中的總結，若是發現錯誤，歡迎留言指出~

參考：

1. 認識Skeleton Screen【屏幕加載骨架】
2. 爲vue項目添加骨架屏
3. 下降首屏時間，「直出」是個什麼概念?
4. Vue頁面骨架屏
5. 小程序構建骨架屏的探索
6. 餓了麼的 PWA 升級實踐
7. 一個vue實現多頁面骨架屏vue-skeleton-webpack-plugin插件的使用

PS：歡迎你們關注個人公衆號【前端下午茶】，一塊兒加油吧~

另外能夠加入「前端下午茶交流羣」微信羣，長按識別下面二維碼便可加我好友，備註加羣，我拉你入羣～