Vue項(xiàng)目骨架屏注入實(shí)踐
相比于早些年前后端代碼緊密耦合巍扛、后端工程師還得寫前端代碼的時(shí)代恶座，如今已發(fā)展到前后端分離篷牌，這種開發(fā)方式大大提升了前后端項(xiàng)目的可維護(hù)性與開發(fā)效率恶迈，讓前后端工程師關(guān)注于自己的主業(yè)臣咖。然而在帶來便利的同時(shí)跃捣，也帶來了一些弊端，比如首屏渲染時(shí)間(FCP)因?yàn)槭灼列枰埱蟾鄡?nèi)容夺蛇，比原來多了更多HTTP的往返時(shí)間(RTT)疚漆，這造成了白屏，如果白屏?xí)r間過長刁赦，用戶體驗(yàn)會(huì)大打折扣娶聘，如果用戶網(wǎng)速差，則FCP會(huì)更長甚脉。
由此引申出一系列的優(yōu)化方法丸升，骨架屏也因此被提出。
1. FCP優(yōu)化
在 Google 提出的以用戶為中心的四個(gè)頁面性能衡量指標(biāo)中牺氨，F(xiàn)P/FCP可能是開發(fā)者們最熟悉的了：
[圖片上傳失敗...(image-469dfe-1544077223346)]
為了優(yōu)化首屏渲染時(shí)間這個(gè)指標(biāo)狡耻，減少白屏?xí)r間，前端仔們想了很多辦法：
加速或減少HTTP請求損耗：使用CDN加載公用庫猴凹，使用強(qiáng)緩存和協(xié)商緩存酝豪，使用域名收斂，小圖片使用Base64代替精堕，使用Get請求代替Post請求孵淘，設(shè)置
Access-Control-Max-Age減少預(yù)檢請求，頁面內(nèi)跳轉(zhuǎn)其他域名或請求其他域名的資源時(shí)使用瀏覽器prefetch預(yù)解析等歹篓；延遲加載：非重要的庫瘫证、非首屏圖片延遲加載揉阎，SPA的組件懶加載等；
減少請求內(nèi)容的體積：開啟服務(wù)器Gzip壓縮背捌，JS毙籽、CSS文件壓縮合并，減少cookies大小毡庆，SSR直接輸出渲染后的HTML等坑赡；
瀏覽器渲染原理：優(yōu)化關(guān)鍵渲染路徑，盡可能減少阻塞渲染的JS么抗、CSS毅否；
優(yōu)化用戶等待體驗(yàn)：白屏使用加載進(jìn)度條、菊花圖蝇刀、骨架屏代替等螟加；
這里要介紹的就是優(yōu)化用戶等待體驗(yàn)的骨架屏，它可以被視為是原來加載菊花圖的一種升級版吞琐，結(jié)合傳統(tǒng)的首屏優(yōu)化方法對應(yīng)用進(jìn)行優(yōu)化可以達(dá)到不錯(cuò)的效果捆探。
2. 骨架屏
骨架屏可以理解為是當(dāng)數(shù)據(jù)還未加載進(jìn)來前，頁面的一個(gè)空白版本站粟，一個(gè)簡單的關(guān)鍵渲染路徑黍图。可以看一下下面Facebook的骨架屏實(shí)現(xiàn)奴烙，可以看到在頁面完全渲染完成之前雌隅，用戶會(huì)看到一個(gè)樣式簡單，描繪了當(dāng)前頁面的大致框架的骨架屏頁面缸沃，然后骨架屏中各個(gè)占位部分被實(shí)際資源完全替換，這個(gè)過程中用戶會(huì)覺得內(nèi)容正在逐漸加載即將呈現(xiàn)修械，降低了用戶的焦躁情緒趾牧，使得加載過程主觀上變得流暢。
[圖片上傳失敗...(image-ac1345-1544077223342)]
可以看一下下面的示例圖肯污，第一個(gè)為骨架屏翘单，第二個(gè)為菊花圖，第三個(gè)為無優(yōu)化蹦渣，可以看到相比于傳統(tǒng)的菊花圖會(huì)在感官上覺得內(nèi)容出現(xiàn)的流暢而不突兀哄芜，體驗(yàn)更加優(yōu)良。
[圖片上傳失敗...(image-51d675-1544077223342)]
如今這項(xiàng)技術(shù)已經(jīng)在Facebook柬唯、Google认臊、支付寶、餓了么锄奢、簡書失晴、新浪微博剧腻、知乎、美團(tuán)涂屁、領(lǐng)英等公司的產(chǎn)品中被廣泛的使用书在。在論壇和社區(qū)也都有不少文章討論骨架屏的實(shí)現(xiàn)和使用場景等。
3. 生成骨架屏的方法
生成骨架屏的方式主要有：
1. 手寫HTML拆又、CSS的方式為目標(biāo)頁定制骨架屏
做法可以參考<Vue頁面骨架屏注入實(shí)踐>儒旬，主要思路就是使用 vue-server-renderer 這個(gè)本來用于服務(wù)端渲染的插件，用來把我們寫的.vue文件處理為HTML帖族，插入到頁面模板的掛載點(diǎn)中栈源，完成骨架屏的注入。這種方式不甚文明盟萨，如果頁面樣式改變了凉翻，還得改一遍骨架屏，增加了維護(hù)成本捻激。
骨架屏的樣式實(shí)現(xiàn)參考 CodePen
2. 使用圖片作為骨架屏制轰；
簡單暴力，讓UI同學(xué)花點(diǎn)功夫吧哈哈胞谭；小米商城的移動(dòng)端頁面采用的就是這個(gè)方法垃杖，它是使用了一個(gè)Base64的圖片來作為骨架屏。
3. 自動(dòng)生成并自動(dòng)插入靜態(tài)骨架屏
這種方法跟第一種方法類似丈屹，不過是自動(dòng)生成骨架屏调俘，可以關(guān)注下餓了么開源的插件 page-skeleton-webpack-plugin ，它根據(jù)項(xiàng)目中不同的路由頁面生成相應(yīng)的骨架屏頁面旺垒，并將骨架屏頁面通過 webpack 打包到對應(yīng)的靜態(tài)路由頁面中彩库，不過要注意的是這個(gè)插件目前只支持history方式的路由，不支持hash方式先蒋，且目前只支持首頁的骨架屏骇钦，并沒有組件級的局部骨架屏實(shí)現(xiàn)，作者說以后會(huì)有計(jì)劃實(shí)現(xiàn)(issue9)竞漾。
另外還有個(gè)插件 vue-skeleton-webpack-plugin眯搭，它將插入骨架屏的方式由手動(dòng)改為自動(dòng)，原理在構(gòu)建時(shí)使用 Vue 預(yù)渲染功能业岁，將骨架屏組件的渲染結(jié)果 HTML 片段插入 HTML 頁面模版的掛載點(diǎn)中鳞仙，將樣式內(nèi)聯(lián)到 head 標(biāo)簽中。這個(gè)插件可以給單頁面的不同路由設(shè)置不同的骨架屏笔时，也可以給多頁面設(shè)置棍好，同時(shí)為了開發(fā)時(shí)調(diào)試方便，會(huì)將骨架屏作為路由寫入router中，可謂是相當(dāng)體貼了梳玫。
vue-skeleton-webpack-plugin的具體使用參考 vue-style-codebase爹梁，主要關(guān)注build目錄的幾個(gè)文件，線上Demo 在Chrome的DevTools中把network的網(wǎng)速調(diào)為Gast 3G / Slow 3G就能看到效果了~
網(wǎng)上的帖子大多深淺不一提澎，甚至有些前后矛盾姚垃，在下的文章都是學(xué)習(xí)過程中的總結(jié)，如果發(fā)現(xiàn)錯(cuò)誤盼忌，歡迎留言指出~
參考：
