頁面初始化時提升使用者體驗

我們前端頁面的資料一般都是請求後端獲取的，當後端介面資料還沒有請求完成時，我們是拿不到後端資料的。此時頁面初始化顯示的效果可能如下圖所示：

簡單優化(loading優化)：

我們可以在使用者剛進入時，將整個頁面隱藏，同時載入loading動畫。在拿到後端資料之後再展示頁面關閉loading動畫。加一個loading動畫可以讓使用者感覺時間變快。以Vue程式碼為例：

使用骨架屏進行優化：

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

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

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

生成骨架屏的方法

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

手寫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中，可謂是相當體貼了。

PS：如果在進行網頁開發的話，不建議使用圖片來代替骨架屏，因為要從網路載入圖片，極有可能得不償失，不過控制好圖片大小，應該影響不大。一般在進行混合app開發的時候才有可能用到骨架圖。因為app圖片資源可以打入APP本地，載入本地圖片很快。

載入優化

主要是從減少程式碼體積，圖片大小，後端介面響應時間入手：

減少http請求，儘量減少向伺服器的請求數量；利用快取：所有的資源都要的伺服器端設定快取，快取一切可以快取的資源；壓縮HTML、CSS、JS，減少資源大小可加快頁面載入速度；無阻塞：css檔案在頭部引入，js在也頁面尾部，防止頁面阻塞；按需載入，預載入；壓縮圖片，使用字型代替圖片，使用雪碧圖；