頁面初始化時提升用戶體驗

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

簡單優化(loading優化)：

我們可以在用戶剛進入時，將整個頁面隱藏，同時加載loading動畫。在拿到后端數據之后再展示頁面關閉loading動畫。加一個loading動畫可以讓用戶感覺時間變快。以Vue代碼為例：

使用骨架屏進行優化：

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

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

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

生成骨架屏的方法

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

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

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

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

加載優化

主要是從減少代碼體積，圖片大小，后端接口響應時間入手：

1. 減少http請求，盡量減少向服務器的請求數量；
2. 利用緩存：所有的資源都要的服務器端設置緩存，緩存一切可以緩存的資源；
3. 壓縮HTML、CSS、JS，減少資源大小可加快頁面加載速度；
4. 無阻塞：css文件在頭部引入，js在也頁面尾部，防止頁面阻塞；
5. 按需加載，預加載；
6. 壓縮圖片，使用字體代替圖片，使用雪碧圖；

當前題目：前端如何對頁面進行優化
URL分享：http://www.2m8n56k.cn/news35/104885.html

成都網站建設公司_創新互聯，為您提供標簽優化、Google、網站排名、電子商務、外貿網站建設、移動網站建設

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：[email protected]。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯