本文作者詳細(xì)的跟大家介紹了數(shù)據(jù)加載的相關(guān)知識(shí)，一起來(lái)文中看看~

在項(xiàng)目進(jìn)程中，遇到了一個(gè)數(shù)據(jù)加載常見的問題：前端向服務(wù)器發(fā)送資源請(qǐng)求，服務(wù)端在返回?cái)?shù)據(jù)的過(guò)程中，可能會(huì)因?yàn)榫W(wǎng)絡(luò)或者返回路徑出錯(cuò)等問題，導(dǎo)致資源沒有辦法順暢的在前端進(jìn)行展示，可能會(huì)出現(xiàn)加載延遲或者加載失敗。

這時(shí)為了保持較好的用戶體驗(yàn)，需要給到前端一個(gè)加載占位圖和加載失敗的狀態(tài)提示。在解決這些問題的過(guò)程中，對(duì)于數(shù)據(jù)加載有了更多的認(rèn)識(shí)，并整理了出來(lái)。

一、加載的業(yè)務(wù)場(chǎng)景/觸發(fā)事件

（1）從后臺(tái)切回前臺(tái)（一定時(shí)間內(nèi)）

若切到后臺(tái)并在很短時(shí)間內(nèi)切回前臺(tái)（視業(yè)務(wù)需要而定），則不加載新數(shù)據(jù)，繼續(xù)顯示原頁(yè)面和提示框；若時(shí)間間隔超過(guò)一定值，則需要追加事件刷新當(dāng)前頁(yè)面并加載新數(shù)據(jù)。

（2）啟動(dòng)APP

當(dāng)異常關(guān)閉、應(yīng)用閃退、進(jìn)程被殺等情況出現(xiàn)時(shí)，點(diǎn)擊需要重新啟動(dòng)APP，展示啟動(dòng)頁(yè)或者直接加載首頁(yè)。

（3）頁(yè)面內(nèi)事件觸發(fā)加載：用戶手動(dòng)加載、系統(tǒng)自動(dòng)加載

用戶手動(dòng)加載，一般通過(guò)下拉或者點(diǎn)擊操作刷新頁(yè)面，加載新數(shù)據(jù)；系統(tǒng)自動(dòng)加載的方式一般為，當(dāng)前內(nèi)容已經(jīng)展示完畢后隨即加載并刷新出新的內(nèi)容。

（4）定時(shí)數(shù)據(jù)刷新

一些排行榜或者限時(shí)活動(dòng)，需要在特定時(shí)間進(jìn)行頁(yè)面刷新和數(shù)據(jù)加載。

（5）實(shí)時(shí)消息推送

IM消息采用實(shí)時(shí)推送機(jī)制，一般不需要用戶手動(dòng)去加載或刷新。

二、如何加載/加載邏輯

（1）懶加載和預(yù)加載

• 懶加載（一般默認(rèn)使用懶加載）：進(jìn)入頁(yè)面，再加載數(shù)據(jù)；
• 預(yù)加載（Wi-Fi情況下考慮使用）：預(yù)加載數(shù)據(jù)，再展示頁(yè)面。

（2）整體加載

加載完頁(yè)面所有內(nèi)容后，再展示給用戶，可以保證內(nèi)容的完整性，應(yīng)用于一些對(duì)內(nèi)容完整性有要求的頁(yè)面，如購(gòu)物車。若加載時(shí)間過(guò)長(zhǎng)，需要給予用戶一定反饋和提示。

（3）分塊加載

可以根據(jù)資源類型等進(jìn)行先后加載，比如資訊類文章優(yōu)先加載文字，其后加載圖片?？梢员ＷC用戶最快獲取內(nèi)容，但是部門內(nèi)容由于加載慢可能被用戶忽略。

（4）分頁(yè)加載

對(duì)于一些列表或者卡片信息，可以使用自動(dòng)或者手動(dòng)的分頁(yè)加載。這樣可以展示比較豐富的內(nèi)容，但是也對(duì)信息的檢索帶來(lái)一定麻煩。

（5）分屏加載

先加載頁(yè)面框架，頁(yè)面滾動(dòng)到哪里再加載相應(yīng)內(nèi)容。適用于一些數(shù)據(jù)量比較大的頁(yè)面。

（6）智能加載

根據(jù)用戶的網(wǎng)絡(luò)狀況選擇不同的加載方案。非Wi-Fi下，暫不加載圖片和文字，用戶點(diǎn)擊確認(rèn)后，才加載資源；Wi-Fi情況下，加載所有資源。

（7）Wi-Fi預(yù)先加載+讀取緩存

Wi-Fi情況下預(yù)先加載數(shù)據(jù)，緩存到本地；在沒有網(wǎng)絡(luò)時(shí)，直接讀取本地緩存?？梢越鉀Q無(wú)網(wǎng)絡(luò)時(shí)獲取數(shù)據(jù)的問題，節(jié)省流量，但是會(huì)占用本地存儲(chǔ)空間。

三、加載優(yōu)化

（1）在Wi-Fi條件下，考慮預(yù)加載

（2）異步處理

例如：支付寶弱網(wǎng)情況下的扣費(fèi)處理（客戶端告知用戶扣費(fèi)成功并將用戶扣費(fèi)行為記錄下來(lái)，等待網(wǎng)絡(luò)環(huán)境變好之后再上報(bào)服務(wù)器并進(jìn)行扣費(fèi)操作）。

（3）使用緩存

需要注意存儲(chǔ)的數(shù)據(jù)類型、更新規(guī)則、是否要清除緩存、清除規(guī)則、用戶是否可以手動(dòng)清除。

四、加載的業(yè)務(wù)流程設(shè)計(jì)

（1）主流程

觸發(fā)事件——（加載邏輯）——頁(yè)面刷新規(guī)則（加載多少數(shù)據(jù)、展示規(guī)則）——刷新出新內(nèi)容——用戶提示文案。

（2）分支流程

沒有更多新內(nèi)容、空頁(yè)面、頁(yè)面被刪除、頁(yè)面被限制。

（3）異常流程

網(wǎng)絡(luò)連接失敗、刷新操作過(guò)于頻繁、網(wǎng)絡(luò)狀態(tài)切換、弱網(wǎng)、 服務(wù)器崩潰。

五、加載的功能流程設(shè)計(jì)

（1）功能

下拉刷新、點(diǎn)擊刷新、系統(tǒng)自動(dòng)刷新、重新加載按鈕。

（2）加載狀態(tài)展示

網(wǎng)絡(luò)情況不佳是否有加載占位圖、加載進(jìn)度條（先慢后快）、加載動(dòng)畫、加載成功與失敗提示。

六、加載占位圖

（1）原理

通過(guò)css控制，可以實(shí)現(xiàn)加載網(wǎng)絡(luò)圖片時(shí)，未加載完成的時(shí)候顯示本地一張占位圖，加載完成后顯示網(wǎng)絡(luò)圖片。

（2）設(shè)計(jì)原則

a. 加載品牌元素或其他元素（提示可能展現(xiàn)的內(nèi)容）

優(yōu)點(diǎn)：給予用戶預(yù)期，提升品牌感知；缺點(diǎn)：需要適配

b. 加載色塊：通過(guò)讀取圖片顏色或默認(rèn)顏色來(lái)占位

優(yōu)點(diǎn)：適配方便，需提供色庫(kù)，畫面不枯燥；缺點(diǎn)：需要調(diào)節(jié)顏色

c. 加載布局：簡(jiǎn)單，但是視覺效果有時(shí)不夠好

d. 加載默認(rèn)灰色圖

e. 使用高斯模糊：效果炫酷；但是有一定功耗，加載慢

七、啟動(dòng)頁(yè)/閃屏

（1）使用場(chǎng)景

在點(diǎn)擊啟動(dòng)APP圖標(biāo)，到APP首頁(yè)的出現(xiàn)，是存在一個(gè)時(shí)間，這個(gè)時(shí)間的長(zhǎng)短取決于設(shè)備的性能和網(wǎng)絡(luò)環(huán)境，從幾百毫秒到幾秒不等。在這段空白時(shí)間，為了不讓用戶感到困惑或因?yàn)榈却a(chǎn)生焦慮。

iOS的設(shè)計(jì)規(guī)范規(guī)定，要在啟動(dòng)APP時(shí)，設(shè)計(jì)一個(gè)啟動(dòng)頁(yè)，來(lái)填補(bǔ)這段用戶等待的時(shí)間。由于APP啟動(dòng)的過(guò)程很短，從幾百毫秒到幾秒不等，所以啟動(dòng)頁(yè)也被稱為閃屏。

但是，現(xiàn)在的啟動(dòng)頁(yè)不僅僅應(yīng)用于這一場(chǎng)景。許多啟動(dòng)頁(yè)還擔(dān)負(fù)了廣告展示、H5活動(dòng)展示、APP跳轉(zhuǎn)等功能。

（2）設(shè)計(jì)原則

• 快速啟動(dòng)類：和首屏頁(yè)面類似，最大程度減少割裂感
• 品牌類：提現(xiàn)品牌logo、名稱、slogan等元素
• 情感共鳴：弱化品牌元素，增進(jìn)情感設(shè)計(jì)
• 廣告類：?jiǎn)?dòng)頁(yè)展示廣告位，流量變現(xiàn)。一般是先顯示品牌頁(yè)，再顯示廣告頁(yè)，用戶可以選擇跳過(guò)
• 節(jié)日類：為特定節(jié)日量身制作啟動(dòng)頁(yè)，給用戶新鮮感、親切感
• 其他：例如成為H5頁(yè)面、其他APP入口等

（3）業(yè)務(wù)流程

啟動(dòng)APP——檢測(cè)本地閃屏資源——-顯示閃屏（同時(shí)進(jìn)行登錄狀態(tài)、用戶權(quán)限、閃屏業(yè)務(wù)檢測(cè)）——點(diǎn)擊跳轉(zhuǎn)到落地頁(yè)/直接進(jìn)入首頁(yè)。

本文由 @lemon 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

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