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

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

簡單優(yōu)化(loading優(yōu)化)：

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

使用骨架屏進行優(yōu)化：

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

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

如今這項技術(shù)已經(jīng)在Facebook、Google、支付寶、餓了么、簡書、新浪微博、知乎、美團、領(lǐng)英等公司的產(chǎn)品中被廣泛的使用。在論壇和社區(qū)也都有不少文章討論骨架屏的實現(xiàn)和使用場景等。

生成骨架屏的方法

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

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

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

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

加載優(yōu)化

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

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

當(dāng)前題目：前端如何對頁面進行優(yōu)化
URL分享：http://jinyejixie.com/news35/104885.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供標(biāo)簽優(yōu)化、Google、網(wǎng)站排名、電子商務(wù)、外貿(mào)網(wǎng)站建設(shè)、移動網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)