客戶端加載耗時(shí)優(yōu)化方案(下)

0 評(píng)論 5253 瀏覽 18 收藏 6 分鐘

編輯導(dǎo)語(yǔ):在上一篇文章中,作者分析了加載耗時(shí)優(yōu)化方案中的“客戶端觸發(fā)頂部刷新”,本文將繼續(xù)從“服務(wù)器收到請(qǐng)求后準(zhǔn)備要下發(fā)的數(shù)據(jù)”和“客戶端收到服務(wù)器數(shù)據(jù)進(jìn)行展示”進(jìn)行耗時(shí)優(yōu)化策略的討論,我們一起來(lái)看一下。

在刷新加載loading的過(guò)程,經(jīng)歷了三個(gè)階段:

  1. 客戶端觸發(fā)頂部刷新;
  2. 服務(wù)器收到請(qǐng)求后準(zhǔn)備要下發(fā)的數(shù)據(jù);
  3. 客戶端收到服務(wù)器數(shù)據(jù)進(jìn)行展示。

本篇文章將從第二階段“服務(wù)器收到請(qǐng)求后準(zhǔn)備要下發(fā)的數(shù)據(jù)”和第三階段“客戶端收到服務(wù)器數(shù)據(jù)進(jìn)行展示”討論耗時(shí)優(yōu)化的策略。

01 第二階段:“服務(wù)器收到請(qǐng)求后準(zhǔn)備要下發(fā)的數(shù)據(jù)”。

1. 預(yù)計(jì)算

在客戶端發(fā)起請(qǐng)求后,服務(wù)器側(cè)一般會(huì)接入推薦系統(tǒng),計(jì)算各種必要數(shù)據(jù)后,再把相應(yīng)內(nèi)容進(jìn)行下發(fā)。

那么能不能提前把這些數(shù)據(jù)計(jì)算好,當(dāng)用戶來(lái)請(qǐng)求內(nèi)容時(shí),無(wú)需計(jì)算而直接下發(fā)呢?

答案是可行的,這也就是“預(yù)計(jì)算”的流程,預(yù)計(jì)算經(jīng)常會(huì)和紅點(diǎn)下發(fā)相結(jié)合,服務(wù)器在給用戶下發(fā)相應(yīng)的紅點(diǎn)時(shí),就提前把紅點(diǎn)所對(duì)應(yīng)的內(nèi)容計(jì)算好;當(dāng)用戶通過(guò)這個(gè)紅點(diǎn)來(lái)請(qǐng)求服務(wù)器的數(shù)據(jù)時(shí),服務(wù)器無(wú)需再接推薦系統(tǒng),也無(wú)需進(jìn)行其它的計(jì)算,而是直接把計(jì)算好的內(nèi)容返回給客戶端。

圖1-預(yù)計(jì)算流程

2. 功能拆解

我們知道,當(dāng)用戶請(qǐng)求服務(wù)器內(nèi)容時(shí),服務(wù)器針對(duì)這個(gè)請(qǐng)求做的計(jì)算越多,返回給用戶就越慢。

舉個(gè)例子:如果在視頻號(hào)頂部刷新時(shí),返回的結(jié)果不止會(huì)告訴你【feed流信息】,還會(huì)在頂部返回【正在直播的用戶信息】。

服務(wù)器計(jì)算【feed流信息】和【正在直播的用戶信息】都會(huì)增加用戶加載的耗時(shí),但如果把這兩個(gè)功能拆解呢?

比如用戶頂部刷新時(shí),給后臺(tái)觸發(fā)兩路請(qǐng)求,一個(gè)是請(qǐng)求【feed流信息】,另外一個(gè)請(qǐng)求【正在直播的用戶信息】,那么就可以盡可能快的返回服務(wù)器的內(nèi)容給用戶進(jìn)行展示。

圖2-功能合并時(shí)的請(qǐng)求流程

圖3-功能拆解時(shí)的請(qǐng)求流程

注意:功能拆解是減緩用戶等待焦慮的一種辦法,但功能拆解可能會(huì)導(dǎo)致數(shù)據(jù)沒(méi)有同步刷新;比如可能會(huì)先展示【feed流信息】,在你預(yù)覽用戶新返回的feed流信息時(shí),【正在直播的用戶信息】服務(wù)器延遲返回,可能就會(huì)打斷你的預(yù)覽體驗(yàn);所以當(dāng)功能拆解影響到了UI展示時(shí),就需要慎重。

02 第三階段:“客戶端收到服務(wù)器數(shù)據(jù)進(jìn)行展示”

1. 假加載策略

你可能會(huì)想,客戶端都已經(jīng)收到服務(wù)器的數(shù)據(jù)了,直接展示給用戶不就是最好的方法嗎?在這個(gè)階段也有耗時(shí)優(yōu)化的策略?

是的,還真有。

下面有兩個(gè)產(chǎn)品方案,作為用戶你可以考慮一下哪種更被你所接受:

  • A.服務(wù)器一次性返回10條數(shù)據(jù),客戶端一次性全部展示;
  • B.服務(wù)器一次性返回10條數(shù)據(jù),但客戶端只先展示前5條,當(dāng)你瀏覽完5條后,本地再做一個(gè)0.5s的刷新,把剩下的5條數(shù)據(jù)展示出來(lái)。

這里實(shí)際上存在一個(gè)用戶心理是:過(guò)期焦慮。當(dāng)用戶一直在本地瀏覽內(nèi)容,卻沒(méi)有看到有刷新加載的標(biāo)志時(shí),這種情況出現(xiàn)時(shí)間越長(zhǎng),用戶就會(huì)越覺(jué)得自己是在看過(guò)期的內(nèi)容;當(dāng)采用A方案時(shí),可能用戶看到第7條內(nèi)容時(shí),就覺(jué)得自己已經(jīng)很久沒(méi)有從服務(wù)器獲取數(shù)據(jù)了,就會(huì)回到頂部觸發(fā)刷新。

而采用B方案時(shí),用戶不僅會(huì)有獲取新數(shù)據(jù)的提示,而且也會(huì)驚嘆于加載耗時(shí)的速度,提升用戶瀏覽的效率。

 

作者:聊哥;公眾號(hào):和產(chǎn)品經(jīng)理聊技術(shù);騰訊工程師,一個(gè)致力于打通開發(fā)和產(chǎn)品隔閡,爭(zhēng)做酷炫互聯(lián)網(wǎng)人的同學(xué)。

本文由 @和產(chǎn)品經(jīng)理聊技術(shù) 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)作者許可,禁止轉(zhuǎn)載。

題圖來(lái)自Unsplash,基于CC0協(xié)議。

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 目前還沒(méi)評(píng)論,等你發(fā)揮!