本篇內(nèi)容主要講解“vue中的骨架屏怎么生成”，感興趣的朋友不妨來(lái)看看。本文介紹的方法操作簡(jiǎn)單快捷，實(shí)用性強(qiáng)。下面就讓小編來(lái)帶大家學(xué)習(xí)“vue中的骨架屏怎么生成”吧!

成都創(chuàng)新互聯(lián)公司主要業(yè)務(wù)有網(wǎng)站營(yíng)銷(xiāo)策劃、網(wǎng)站制作、成都做網(wǎng)站、微信公眾號(hào)開(kāi)發(fā)、小程序開(kāi)發(fā)、H5高端網(wǎng)站建設(shè)、程序開(kāi)發(fā)等業(yè)務(wù)。一次合作終身朋友，是我們奉行的宗旨；我們不僅僅把客戶當(dāng)客戶，還把客戶視為我們的合作伙伴，在開(kāi)展業(yè)務(wù)的過(guò)程中，公司還積累了豐富的行業(yè)經(jīng)驗(yàn)、成都全網(wǎng)營(yíng)銷(xiāo)資源和合作伙伴關(guān)系資源，并逐漸建立起規(guī)范的客戶服務(wù)和保障體系。 

在vue中，骨架屏就是在頁(yè)面數(shù)據(jù)尚未加載前先給用戶展示出頁(yè)面的大致結(jié)構(gòu)，直到請(qǐng)求數(shù)據(jù)返回后再渲染頁(yè)面，補(bǔ)充進(jìn)需要顯示的數(shù)據(jù)內(nèi)容；骨架屏可以理解為是當(dāng)數(shù)據(jù)還未加載進(jìn)來(lái)前，頁(yè)面的一個(gè)空白版本，一個(gè)簡(jiǎn)單的關(guān)鍵渲染路徑。

本教程操作環(huán)境：windows7系統(tǒng)、vue2.9.6版，DELL G3電腦。

相比于早些年前后端代碼緊密耦合、后端工程師還得寫(xiě)前端代碼的時(shí)代，如今已發(fā)展到前后端分離，這種開(kāi)發(fā)方式大大提升了前后端項(xiàng)目的可維護(hù)性與開(kāi)發(fā)效率，讓前后端工程師關(guān)注于自己的主業(yè)。然而在帶來(lái)便利的同時(shí)，也帶來(lái)了一些弊端，比如首屏渲染時(shí)間(FCP)因?yàn)槭灼列枰?qǐng)求更多內(nèi)容，比原來(lái)多了更多HTTP的往返時(shí)間(RTT)，這造成了白屏，如果白屏?xí)r間過(guò)長(zhǎng)，用戶體驗(yàn)會(huì)大打折扣，如果用戶網(wǎng)速差，則FCP會(huì)更長(zhǎng)。

由此引申出一系列的優(yōu)化方法，骨架屏也因此被提出。

1. FCP優(yōu)化

在 Google 提出的以用戶為中心的四個(gè)頁(yè)面性能衡量指標(biāo)中，F(xiàn)P/FCP可能是開(kāi)發(fā)者們最熟悉的了：

為了優(yōu)化首屏渲染時(shí)間這個(gè)指標(biāo)，減少白屏?xí)r間，前端仔們想了很多辦法：

• 加速或減少HTTP請(qǐng)求損耗：使用cdn加載公用庫(kù)，使用強(qiáng)緩存和協(xié)商緩存，使用域名收斂，小圖片使用Base64代替，使用Get請(qǐng)求代替Post請(qǐng)求，設(shè)置 Access-Control-Max-Age 減少預(yù)檢請(qǐng)求，頁(yè)面內(nèi)跳轉(zhuǎn)其他域名或請(qǐng)求其他域名的資源時(shí)使用瀏覽器prefetch預(yù)解析等；

• 延遲加載：非重要的庫(kù)、非首屏圖片延遲加載，SPA的組件懶加載等；

• 減少請(qǐng)求內(nèi)容的體積：開(kāi)啟服務(wù)器Gzip壓縮，JS、CSS文件壓縮合并，減少cookies大小，SSR直接輸出渲染后的HTML等；

• 瀏覽器渲染原理：優(yōu)化關(guān)鍵渲染路徑，盡可能減少阻塞渲染的JS、CSS；

• 優(yōu)化用戶等待體驗(yàn)：白屏使用加載進(jìn)度條、菊花圖、骨架屏代替等；

這里要介紹的就是優(yōu)化用戶等待體驗(yàn)的骨架屏，它可以被視為是原來(lái)加載菊花圖的一種升級(jí)版，結(jié)合傳統(tǒng)的首屏優(yōu)化方法對(duì)應(yīng)用進(jìn)行優(yōu)化可以達(dá)到不錯(cuò)的效果。

2. 骨架屏

骨架屏就是在頁(yè)面數(shù)據(jù)尚未加載前先給用戶展示出頁(yè)面的大致結(jié)構(gòu)，直到請(qǐng)求數(shù)據(jù)返回后再渲染頁(yè)面，補(bǔ)充進(jìn)需要顯示的數(shù)據(jù)內(nèi)容。常用于文章列表、動(dòng)態(tài)列表頁(yè)等相對(duì)比較規(guī)則的列表頁(yè)面。

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

可以看一下下面的示例圖，第一個(gè)為骨架屏，第二個(gè)為菊花圖，第三個(gè)為無(wú)優(yōu)化，可以看到相比于傳統(tǒng)的菊花圖會(huì)在感官上覺(jué)得內(nèi)容出現(xiàn)的流暢而不突兀，體驗(yàn)更加優(yōu)良。

3. 生成骨架屏的方法

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

1. 手寫(xiě)HTML、CSS的方式為目標(biāo)頁(yè)定制骨架屏 做法可以參考，主要思路就是使用 vue-server-renderer 這個(gè)本來(lái)用于服務(wù)端渲染的插件，用來(lái)把我們寫(xiě)的.vue文件處理為HTML，插入到頁(yè)面模板的掛載點(diǎn)中，完成骨架屏的注入。這種方式不甚文明，如果頁(yè)面樣式改變了，還得改一遍骨架屏，增加了維護(hù)成本。 骨架屏的樣式實(shí)現(xiàn)參考 CodePen

2. 使用圖片作為骨架屏； 簡(jiǎn)單暴力，讓UI同學(xué)花點(diǎn)功夫吧哈哈；小米商城的移動(dòng)端頁(yè)面采用的就是這個(gè)方法，它是使用了一個(gè)Base64的圖片來(lái)作為骨架屏。

3. 自動(dòng)生成并自動(dòng)插入靜態(tài)骨架屏 這種方法跟第一種方法類(lèi)似，不過(guò)是自動(dòng)生成骨架屏，可以關(guān)注下餓了么開(kāi)源的插件 page-skeleton-webpack-plugin ，它根據(jù)項(xiàng)目中不同的路由頁(yè)面生成相應(yīng)的骨架屏頁(yè)面，并將骨架屏頁(yè)面通過(guò) webpack 打包到對(duì)應(yīng)的靜態(tài)路由頁(yè)面中，不過(guò)要注意的是這個(gè)插件目前只支持history方式的路由，不支持hash方式，且目前只支持首頁(yè)的骨架屏，并沒(méi)有組件級(jí)的局部骨架屏實(shí)現(xiàn)，作者說(shuō)以后會(huì)有計(jì)劃實(shí)現(xiàn)(issue9)。

另外還有個(gè)插件 vue-skeleton-webpack-plugin，它將插入骨架屏的方式由手動(dòng)改為自動(dòng)，原理在構(gòu)建時(shí)使用 Vue 預(yù)渲染功能，將骨架屏組件的渲染結(jié)果 HTML 片段插入 HTML 頁(yè)面模版的掛載點(diǎn)中，將樣式內(nèi)聯(lián)到 head 標(biāo)簽中。這個(gè)插件可以給單頁(yè)面的不同路由設(shè)置不同的骨架屏，也可以給多頁(yè)面設(shè)置，同時(shí)為了開(kāi)發(fā)時(shí)調(diào)試方便，會(huì)將骨架屏作為路由寫(xiě)入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就能看到效果了~

到此，相信大家對(duì)“vue中的骨架屏怎么生成”有了更深的了解，不妨來(lái)實(shí)際操作一番吧！這里是創(chuàng)新互聯(lián)網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！