頁面初始化時(shí)提升用戶體驗(yàn)

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

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

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

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

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

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

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

生成骨架屏的方法

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

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

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

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

加載優(yōu)化

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

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

當(dāng)前題目：前端如何對(duì)頁面進(jìn)行優(yōu)化
URL分享：http://www.rwnh.cn/news35/104885.html

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

廣告

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