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. 骨架屏

骨架屏可以理解為是當數據還未加載進來前，頁面的一個空白版本，一個簡單的關鍵渲染路徑?？梢钥匆幌孪旅鍲acebook的骨架屏實現，可以看到在頁面完全渲染完成之前，用戶會看到一個樣式簡單，描繪了當前頁面的大致框架的骨架屏頁面，然后骨架屏中各個占位部分被實際資源完全替換，這個過程中用戶會覺得內容正在逐漸加載即將呈現，降低了用戶的焦躁情緒，使得加載過程主觀上變得流暢。

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

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

3. 生成骨架屏的方法

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

手寫HTML、CSS的方式為目標頁定制骨架屏做法可以參考<Vue頁面骨架屏注入實踐>，主要思路就是使用 vue-server-renderer 這個本來用于服務端渲染的插件，用來把我們寫的.vue文件處理為HTML，插入到頁面模板的掛載點中，完成骨架屏的注入。這種方式不甚文明，如果頁面樣式改變了，還得改一遍骨架屏，增加了維護成本。骨架屏的樣式實現參考 CodePen
使用圖片作為骨架屏；簡單暴力，讓UI同學花點功夫吧哈哈；小米商城的移動端頁面采用的就是這個方法，它是使用了一個Base64的圖片來作為骨架屏。
自動生成并自動插入靜態骨架屏這種方法跟第一種方法類似，不過是自動生成骨架屏，可以關注下餓了么開源的插件 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就能看到效果了~

由此引申出一系列的優化方法，骨架屏也因此被提出，本文就以 Vue 項目中的骨架屏為例，探討一下骨架屏的優缺點和注入方式。

感興趣的同學可以加一下微信群，一起討論吧～

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. 骨架屏

3. 生成骨架屏的方法

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

手寫HTML、CSS的方式為目標頁定制骨架屏做法可以參考，主要思路就是使用 vue-server-renderer 這個本來用于服務端渲染的插件，用來把我們寫的 .vue文件處理為 HTML，插入到頁面模板的掛載點中，完成骨架屏的注入。這種方式不甚文明，如果頁面樣式改變了，還得改一遍骨架屏，增加了維護成本。
使用圖片作為骨架屏；簡單暴力，讓UI同學花點功夫吧哈哈；小米商城的移動端頁面采用的就是這個方法，它是使用了一個Base64的圖片來作為骨架屏。
自動生成并自動插入靜態骨架屏這種方法跟第一種方法類似，不過是自動生成骨架屏，可以關注下餓了么開源的插件 page-skeleton-webpack-plugin ，它根據項目中不同的路由頁面生成相應的骨架屏頁面，并將骨架屏頁面通過 webpack 打包到對應的靜態路由頁面中，不過要注意的是這個插件目前只支持history方式的路由，不支持hash方式，且目前只支持首頁的骨架屏，并沒有組件級的局部骨架屏實現，作者說以后會有計劃實現。

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

vue-skeleton-webpack-plugin 的具體使用參考 vue-style-codebase，主要關注build目錄的幾個文件，實例跑起來之后在 Chrome 的 DevTools 中把 network 的網速調為 Gast3G/Slow3G 就能看到效果了~

信ID：WEB_wysj(點擊關注) ◎ ◎ ◎ ◎ ◎◎◎◎◎一┳═┻︻▄

（頁底留言開放，歡迎來吐槽）

● ● ●

前言

晚上逛論壇看到一篇對從事HTML5前端開發的文章寫的非常不錯,和目前的市場形勢差不多,然后我在其基礎上給大家進行加工總結一下分享給大家.今天我們談論的話題是<<為什么從事HTML5前端開發越來越火,工資高,并且還漲的快>>,針對這個問題進行分析分析.

俗話說的好:”沒有調查,就沒有發言權”,同樣在市場浪潮中,同樣如果沒有實際調查,不要輕易發表言論,誤導他人.

現在主要從下面幾個方面給大家進行總結和分析呢?

HTML5前端開發的薪資
市場的供求關系
HTML5語言優勢

HTML5前端開發的薪資

首先我們來看看2016年上半年前端端開發的薪資情況(參考了拉勾網,智聯招聘,51job,前程無憂,Boss直聘上的數據)。

1.我們來看看北京的薪資情況

說明：北京前端開發平均工資：￥10576元/月

2.我們來看看廣州的薪資情況

說明：廣州前端開發平均工資：￥8124元/月

3.我們來看看上海的薪資情況

說明：上海前端開發平均工資：￥9270元/月

4.我們來看看深圳的薪資情況

說明：深圳前端開發平均工資：￥11464元/月

因此綜上的統計供大家參考.在技術類里，HTML5技術能力的值錢程度很突出，名列前茅。這正代表了前端技術的當前行情?，F在HTML5 有過1-2年工作經驗的,跳槽工資的漲幅只高不低.

那么問題來了,導致這一現象的原因是什么呢?看下面分析……

具體分析點擊“閱讀原文”

???

在線咨詢

上一篇：如何設置QQ透明頭像，空白名片，空白資料
下一篇：IT技術棧：Javascript與硬件通信，串口的使用

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

Vue項目骨架屏注入實踐和方法總結

1. FCP 優化

2. 骨架屏

3. 生成骨架屏的方法

您的項目需求