加載是信息更新的反饋過程。包括人機(jī)交互的反饋，以及計(jì)算機(jī)（客戶端）與服務(wù)器（后臺(tái)）交互的反饋。

觸發(fā)加載有兩種方式：一種是用戶手動(dòng)觸發(fā)，比如點(diǎn)擊【朋友圈】。

另一個(gè)是系統(tǒng)定時(shí)任務(wù)，按照一定的頻率或規(guī)則自動(dòng)執(zhí)行。例如，如果聊天消息的時(shí)間在1分鐘內(nèi)顯示“剛剛”，那么定時(shí)任務(wù)可以每分鐘刷新一次，時(shí)間顯示模式會(huì)自動(dòng)更新。

產(chǎn)品經(jīng)理需要確定加載策略機(jī)制，以減少或分散等待時(shí)間的壓力。同時(shí)優(yōu)化反饋效果，緩解焦慮。

下面，我們將分別討論移動(dòng)端和Web端。

一、App加載策略機(jī)制1.整個(gè)頁面同步加載

整個(gè)頁面的所有內(nèi)容都一次性加載給用戶。網(wǎng)速不友好很容易“死胎”。所以加載過程中會(huì)出現(xiàn)白屏。

為避免空虛，常與菊花或進(jìn)度條搭配使用。

2. 異步加載

可以從三個(gè)角度進(jìn)行設(shè)計(jì)：

首先加載占用較少網(wǎng)絡(luò)資源的元素模塊。例如，文本和默認(rèn)圖標(biāo)后跟圖片。按重量模塊加載。例如，如果模塊相關(guān)，則先加載父內(nèi)容，然后加載子內(nèi)容。分步加載相同的模塊。例如，首先加載縮略圖或占位符，用戶在加載較大的圖像之前單擊它。再比如，當(dāng)加載的頁面有固定框架時(shí)，??可以先加載框架，再加載框架中的內(nèi)容。這個(gè)加載的屏幕被稱為“骨架屏幕”。

異步加載是一個(gè)比較成熟的指導(dǎo)思想。多用于頁面內(nèi)容較多，圖文混雜的時(shí)候。

3. 預(yù)加載

預(yù)加載是在加載頁面內(nèi)容時(shí)預(yù)測(cè)用戶的下一步行為，為下一步需要使用的頁面預(yù)先加載內(nèi)容。例如小程序開發(fā)，在網(wǎng)易新聞中，即使您從未打開過新聞，如果您與互聯(lián)網(wǎng)斷開連接小程序開發(fā)，您仍然可以查看新聞。

4. 延遲加載

延遲加載解決方案是，只有當(dāng)圖像滾動(dòng)到窗口中并被用戶看到時(shí)，它才會(huì)真正加載。目前淘寶、知乎等大流量網(wǎng)站已經(jīng)采用了圖片滾動(dòng)的懶加載方案。

5. 分頁加載

分頁加載可以減輕單個(gè)加載的壓力。適用于瀑布、長列表、產(chǎn)品列表等。

有些頁面有明確的[Next]按鈕，點(diǎn)擊加載下一頁。

有些是無形的分頁，比如抖音的視頻瀑布，在用戶看來就是源源不斷的信息流。

這就是為什么我們看新聞、瀏覽淘寶、瀏覽微博都出不去的原因。缺點(diǎn)是容易迷路，不方便快速索引定位某個(gè)內(nèi)容。

6. 離線緩存加載

首先，在有網(wǎng)絡(luò)的情況下提前加載數(shù)據(jù)，并在本地緩存。沒有網(wǎng)絡(luò)時(shí)，直接加載緩存的內(nèi)容。

但是，考慮到手機(jī)的空間，應(yīng)該設(shè)計(jì)一個(gè)合適的清除緩存的機(jī)制。

二、App加載界面反饋設(shè)計(jì)1.圖標(biāo)

1）加載圖標(biāo)樣式

通常你可以選擇傳統(tǒng)的菊花動(dòng)畫。

如果我們更進(jìn)一步，我們可以將品牌基因構(gòu)建到指標(biāo)的設(shè)計(jì)中。以飛豬的動(dòng)態(tài)效果為例，無疑體現(xiàn)了產(chǎn)品之間的差異。

我們可以稍微考慮一下，選擇用一些有趣的動(dòng)畫來分散用戶的注意力。

2）圖標(biāo)放置

2. 加載替代形式

1）啟動(dòng)頁面

啟動(dòng)app需要一個(gè)短暫的過程，啟動(dòng)頁面的作用就是等到系統(tǒng)加載啟動(dòng)。

啟動(dòng)頁面可以是廣告空間、假日營銷或品牌知名度。它可以是靜態(tài)頁面或動(dòng)態(tài)圖像。

另一種啟動(dòng)頁面的方式是讓它和首頁一樣，給人一種進(jìn)入首頁很快的感覺。

2）以跳躍或運(yùn)動(dòng)偽裝加載

跳躍本身也需要一定的時(shí)間，所以也可以為加載爭(zhēng)取時(shí)間。比如添加到購物車動(dòng)畫。

3. 支持加載時(shí)及時(shí)退出

用戶有權(quán)選擇不加載，也可以將加載的默認(rèn)時(shí)間設(shè)置為不能提示用戶重新加載。

三、PC端頁面加載機(jī)制1.頁面加載速度的影響

如果用戶試圖訪問你的網(wǎng)站，那么你的網(wǎng)站應(yīng)該在 10 秒內(nèi)打開網(wǎng)站開發(fā)，如果超過這個(gè)時(shí)間，他將放棄任務(wù)的執(zhí)行。

許多研究表明，用戶最滿意的是他們?cè)?2 秒內(nèi)打開頁面的時(shí)間。如果頁面等待超過 12 秒后還沒有加載，那么超過 99% 的用戶會(huì)關(guān)閉頁面。

在我做的一個(gè)實(shí)驗(yàn)中，加載一個(gè)顯示 10 個(gè)搜索結(jié)果的頁面需要 0.4 秒，加載一個(gè)顯示 30 個(gè)搜索結(jié)果的頁面需要 0.9 秒。如果采用后一種方案，流量和收入各下降 20%。

這就是為什么在很多電商后臺(tái)管理系統(tǒng)中，默認(rèn)加載的數(shù)據(jù)個(gè)數(shù)是10個(gè)，而不是15個(gè)或30個(gè)。

2. 了解頁面加載過程

當(dāng)用戶打開一個(gè)頁面時(shí)，首先是頁面的框架，將不需要加載的內(nèi)容呈現(xiàn)出來，然后逐漸從服務(wù)器拉取數(shù)據(jù)，會(huì)出現(xiàn)頁面的部分內(nèi)容PC端空白。如果在APP端使用H5技術(shù)打開網(wǎng)頁，一般會(huì)給出加載條。

我們可以這樣理解，打開一個(gè)基于html的靜態(tài)頁面，然后混入調(diào)用服務(wù)器算法的元素，不斷渲染加載，呈現(xiàn)出我們所期待的樣子。

用戶的等待時(shí)間主要花在下載網(wǎng)頁元素上，即HTML、CSS、、、、圖片等。

統(tǒng)計(jì)顯示，每增加一個(gè)元素，頁面加載時(shí)間就會(huì)增加 25-40 毫秒（取決于用戶的帶寬）。

打開頁面→HTML寫的靜態(tài)頁面→//ajax（AJAX意思是“和XML”（異步和XML）等渲染→處理提交表單的數(shù)據(jù)，向后端對(duì)應(yīng)的發(fā)起ajax請(qǐng)求PHP api接口 → PHP in 接收到數(shù)據(jù)后，連接服務(wù)器，服務(wù)器通過PHP中的SQL語句處理數(shù)據(jù)庫關(guān)鍵字返回給PHP，再返回給前端，前端將數(shù)據(jù)渲染在HTML通過JS處理，最終呈現(xiàn)給用戶。

點(diǎn)擊事件加入購物車的一般步驟是：用戶點(diǎn)擊“加入購物車”按鈕→頁面獲取當(dāng)前商品的唯一值（如商品ID：）→JS處理點(diǎn)擊事件，并通過ajax請(qǐng)求將唯一值連同用戶信息傳送給PHP→PHP請(qǐng)求連接服務(wù)器→執(zhí)行數(shù)據(jù)庫語句→服務(wù)器返回執(zhí)行結(jié)果給PHP→PHP將執(zhí)行結(jié)果傳送給前端。

如果數(shù)據(jù)庫語句執(zhí)行成功，數(shù)據(jù)庫中用戶的購物車表會(huì)多出一條剛剛添加的商品數(shù)據(jù)，服務(wù)器也會(huì)返回執(zhí)行成功信息（以及一個(gè)非空的數(shù)據(jù)串）給PHP，而用戶的界面會(huì)顯示“成功加入購物車”字樣。

如果執(zhí)行失敗網(wǎng)站開發(fā)，也會(huì)將失敗信息（err）傳遞給PHP，用戶界面也會(huì)顯示相應(yīng)的提示。

由于當(dāng)前網(wǎng)頁使用大量的JS，瀏覽器在打開頁面時(shí)會(huì)占用大量內(nèi)存。服務(wù)端的壓力得到了緩解，但是壓力卻轉(zhuǎn)移到了客戶端。

3. 如何優(yōu)化頁面打開速度