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

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

簡(jiǎn)單優(yōu)化(loading優(yōu)化)：

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

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

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

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

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

生成骨架屏的方法

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

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

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

PS：如果在進(jìn)行網(wǎng)頁(yè)開(kāi)發(fā)的話，不建議使用圖片來(lái)代替骨架屏，因?yàn)橐獜木W(wǎng)絡(luò)加載圖片，極有可能得不償失，不過(guò)控制好圖片大小，應(yīng)該影響不大。一般在進(jìn)行混合app開(kāi)發(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，減少資源大小可加快頁(yè)面加載速度；
4. 無(wú)阻塞：css文件在頭部引入，js在也頁(yè)面尾部，防止頁(yè)面阻塞；
5. 按需加載，預(yù)加載；
6. 壓縮圖片，使用字體代替圖片，使用雪碧圖；

當(dāng)前文章：前端如何對(duì)頁(yè)面進(jìn)行優(yōu)化
標(biāo)題來(lái)源：http://jinyejixie.com/news/104885.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供微信公眾號(hào)、搜索引擎優(yōu)化、網(wǎng)站設(shè)計(jì)、網(wǎng)站導(dǎo)航、自適應(yīng)網(wǎng)站、移動(dòng)網(wǎng)站建設(shè)

廣告

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