中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

本文作者詳細的跟大家介紹了數據加載的相關知識，一起來文中看看~

在項目進程中，遇到了一個數據加載常見的問題：前端向服務器發送資源請求，服務端在返回數據的過程中，可能會因為網絡或者返回路徑出錯等問題，導致資源沒有辦法順暢的在前端進行展示，可能會出現加載延遲或者加載失敗。

這時為了保持較好的用戶體驗，需要給到前端一個加載占位圖和加載失敗的狀態提示。在解決這些問題的過程中，對于數據加載有了更多的認識，并整理了出來。

一、加載的業務場景/觸發事件

（1）從后臺切回前臺（一定時間內）

若切到后臺并在很短時間內切回前臺（視業務需要而定），則不加載新數據，繼續顯示原頁面和提示框；若時間間隔超過一定值，則需要追加事件刷新當前頁面并加載新數據。

（2）啟動APP

當異常關閉、應用閃退、進程被殺等情況出現時，點擊需要重新啟動APP，展示啟動頁或者直接加載首頁。

（3）頁面內事件觸發加載：用戶手動加載、系統自動加載

用戶手動加載，一般通過下拉或者點擊操作刷新頁面，加載新數據；系統自動加載的方式一般為，當前內容已經展示完畢后隨即加載并刷新出新的內容。

（4）定時數據刷新

一些排行榜或者限時活動，需要在特定時間進行頁面刷新和數據加載。

（5）實時消息推送

IM消息采用實時推送機制，一般不需要用戶手動去加載或刷新。

二、如何加載/加載邏輯

（1）懶加載和預加載

• 懶加載（一般默認使用懶加載）：進入頁面，再加載數據；
• 預加載（Wi-Fi情況下考慮使用）：預加載數據，再展示頁面。

（2）整體加載

加載完頁面所有內容后，再展示給用戶，可以保證內容的完整性，應用于一些對內容完整性有要求的頁面，如購物車。若加載時間過長，需要給予用戶一定反饋和提示。

（3）分塊加載

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

（4）分頁加載

對于一些列表或者卡片信息，可以使用自動或者手動的分頁加載。這樣可以展示比較豐富的內容，但是也對信息的檢索帶來一定麻煩。

（5）分屏加載

先加載頁面框架，頁面滾動到哪里再加載相應內容。適用于一些數據量比較大的頁面。

（6）智能加載

根據用戶的網絡狀況選擇不同的加載方案。非Wi-Fi下，暫不加載圖片和文字，用戶點擊確認后，才加載資源；Wi-Fi情況下，加載所有資源。

（7）Wi-Fi預先加載+讀取緩存

Wi-Fi情況下預先加載數據，緩存到本地；在沒有網絡時，直接讀取本地緩存。可以解決無網絡時獲取數據的問題，節省流量，但是會占用本地存儲空間。

三、加載優化

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

（2）異步處理

例如：支付寶弱網情況下的扣費處理（客戶端告知用戶扣費成功并將用戶扣費行為記錄下來，等待網絡環境變好之后再上報服務器并進行扣費操作）。

（3）使用緩存

需要注意存儲的數據類型、更新規則、是否要清除緩存、清除規則、用戶是否可以手動清除。

四、加載的業務流程設計

（1）主流程

觸發事件——（加載邏輯）——頁面刷新規則（加載多少數據、展示規則）——刷新出新內容——用戶提示文案。

（2）分支流程

沒有更多新內容、空頁面、頁面被刪除、頁面被限制。

（3）異常流程

網絡連接失敗、刷新操作過于頻繁、網絡狀態切換、弱網、 服務器崩潰。

五、加載的功能流程設計

（1）功能

下拉刷新、點擊刷新、系統自動刷新、重新加載按鈕。

（2）加載狀態展示

網絡情況不佳是否有加載占位圖、加載進度條（先慢后快）、加載動畫、加載成功與失敗提示。

六、加載占位圖

（1）原理

通過css控制，可以實現加載網絡圖片時，未加載完成的時候顯示本地一張占位圖，加載完成后顯示網絡圖片。

（2）設計原則

a. 加載品牌元素或其他元素（提示可能展現的內容）

優點：給予用戶預期，提升品牌感知；缺點：需要適配

b. 加載色塊：通過讀取圖片顏色或默認顏色來占位

優點：適配方便，需提供色庫，畫面不枯燥；缺點：需要調節顏色

c. 加載布局：簡單，但是視覺效果有時不夠好

d. 加載默認灰色圖

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

七、啟動頁/閃屏

（1）使用場景

在點擊啟動APP圖標，到APP首頁的出現，是存在一個時間，這個時間的長短取決于設備的性能和網絡環境，從幾百毫秒到幾秒不等。在這段空白時間，為了不讓用戶感到困惑或因為等待而產生焦慮。

iOS的設計規范規定，要在啟動APP時，設計一個啟動頁，來填補這段用戶等待的時間。由于APP啟動的過程很短，從幾百毫秒到幾秒不等，所以啟動頁也被稱為閃屏。

但是，現在的啟動頁不僅僅應用于這一場景。許多啟動頁還擔負了廣告展示、H5活動展示、APP跳轉等功能。

（2）設計原則

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

（3）業務流程

啟動APP——檢測本地閃屏資源——-顯示閃屏（同時進行登錄狀態、用戶權限、閃屏業務檢測）——點擊跳轉到落地頁/直接進入首頁。

本文由 @lemon 原創發布于人人都是產品經理。未經許可，禁止轉載

題圖來自Unsplash，基于CC0協議