vue中骨架螢幕是什麼

在vue中，骨架螢幕就是在頁面資料尚未載入前先向使用者展示頁面的大致結構，直到請求資料返回後再渲染頁面，補充進需要顯示的資料內容；骨架螢幕可以理解為是當資料還未載入進來前，頁面的一個空白版本，一個簡單的關鍵渲染路徑。

本教學操作環境：windows7系統、vue2.9.6版，DELL G3電腦。

相較於早年後端程式碼緊密耦合、後端工程師還得寫前端程式碼的時代，如今已發展到前後端分離，這種開發方式大大提升了前後端專案的可維護性與開發效率，讓前後端工程師專注於自己的主業。然而在帶來便利的同時，也帶來了一些弊端，例如首屏渲染時間(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的骨架屏實現，可以看到在頁面完全渲染完成之前，用戶會看到一個樣式簡單，描繪了當前頁面的大致框架的骨架屏頁面，然後骨架屏中各個佔位部分被實際資源完全替換，這個過程中使用者會覺得內容逐漸載入即將呈現，降低了使用者的焦躁情緒，使得載入過程主觀上變得流暢。

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

3. 產生骨架螢幕的方法

產生骨架螢幕的方式主要有：

1. 手寫HTML、CSS的方式為目標頁自訂骨架螢幕做法可以參考，主要思路就是使用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就能看到效果了~

#【相關推薦：vue.js教學】

以上是vue中骨架螢幕是什麼的詳細內容。更多資訊請關注PHP中文網其他相關文章！