一文了解頁面數據加載

2020-12-16 人人都是產品經理

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

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

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

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

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

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

（2）啟動APP

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

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

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

（4）定時數據刷新

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

（5）實時消息推送

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

二、如何加載/加載邏輯

（1）懶加載和預加載

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

（2）整體加載

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

（3）分塊加載

可以根據資源類型等進行先後加載，比如資訊類文章優先加載文字，其後加載圖片。可以保證用戶最快獲取內容，但是部門內容由於加載慢可能被用戶忽略。

（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協議

相關焦點

  • 頁面加載功能設計總結
    指示器用戶每次進入一個新頁面都要從後臺請求數據，數據返回到頁面完成渲染，內容才會展示出來。這個過程需要時間，需要用戶去等待。這是用戶進入一個新頁面所經歷的幾個重要階段，如下圖所示，這裡我將其分成了4個階段。接下來我們從階段1開始梳理頁面加載過程的每一個步驟，力圖發掘可以優化的點。
  • 前端知識普及之頁面加載
    從微觀上分的話，頁面加載有兩部分一個是以DOMContentLoaded觸發為標誌的DOM樹的渲染完成一個是以輔助資源img,font加載完成為觸發標誌的onload事件他們兩個的具體區別就是"資源的加載"這個關鍵點.在獲得數據響應後,頁面開始解析,發生的過程為:(1) 解析HTML結構。
  • 三星手機瀏覽器支持廣告攔截 頁面加載時間縮短51%
    【TechWeb報導】2月1日消息，據國外媒體報導，三星手機內置瀏覽器近日得到更新，安卓5.0用戶升級系統之後，可以通過安裝廣告攔截插件Adblock Fast過濾頁面中的廣告，不僅可以加快網頁加載速度，還能節約流量。
  • 微信小程序頁面加載完成前禁止操作或點其他頁面
    重點來了：如果這時候不設置加載完頁面，或者還未拿到userid的情況下，用戶點其他頁面是沒有數據的，是不顯示的，這樣會導致很嚴重的問題，整個小程序都無法使用了。這時候我們使用wx.showLoading，再配合setTimeout，就能輕鬆實現。
  • 騰訊大數據:移動頁面用戶行為報告
    騰訊大數據發布了移動頁面用戶行為報告，內涵包括加載、高峰期、頁面熱度、流失率等關鍵點。1、加載加載超過5秒就會有74%的用戶離開頁面。8、分享率H5頁面的分享率平均值為3.93%，最高值為22.39%。(原數據：H5頁面的分享率平均值為11.69%，最高值為43.22%。
  • 王者榮耀加載頁面卡住沒有進入對局怎麼辦
    王者榮耀加載頁面卡住沒有進入對局怎麼辦呢?想知道的小夥伴就和小編一起來看看吧!
  • 網頁上動態加載的數據如何使用爬蟲獲取
    本文講的是不使用selenium插件模擬瀏覽器，如何獲得網頁上的動態加載數據。不做如下： 一、找到正確的URL。二、填寫URL對應的參數。三、參數轉化為urllib可識別的字符串data。四、初始化Request對象。五、urlopen這個Request對象，獲得數據。
  • Chrome 85 穩定版發布,頁面加載速度提升 10%
    此版本將頁面加載速度提高了 10%，並帶來了許多標籤頁方面的改進，以及提供了一系列開發者功能。可直接使用 Chrome 內置更新程序升級或從 Chrome 官網下載。頁面加載速度提升Chrome 85 帶來了 Profile Guided Optimization（PGO），這是一種編譯器優化技術，可使代碼中性能最關鍵的部分運行得更快。
  • 騰訊手遊助手出現頁面加載不出來?詳見解決方法
    很多人反應使用騰訊手遊助手總會出現頁面加載不出來，該怎辦呢?下文就是使用騰訊手遊助手出現頁面加載不出來的詳細解決方法。進入時間日期設置界面，首先確認時區是否是北京，不是的話改過來，然後點擊internet時間選項卡，如下圖所示點擊更改設置按鈕，如下圖所示點擊立即更新，讓時間跟索正確的Internet時間即可，如下圖所示上文就是小編講解的使用騰訊手遊助手出現頁面加載不出來的詳細解決方法
  • Greenplum的流數據加載
    但問題在於，這是否意味著，任何人只要有了同樣的工具、模型和數據之後，就可以獲取到同樣的價值呢？對於關注於算法和模型本身的學術領域來說，這一論斷可能是肯定的；但對於實際生產中，答案卻是否定的，因為它忽略了數據本身一個非常重要的特性，即數據的時效性。數據時效性指的是，數據的價值不是一成不變的，數據的價值會隨著數據產生後時間的增加而逐步遞減。
  • 解決VUE頁面刷新,數據丟失「建議收藏」
    在vue項目中有時候會遇到一個問題，就是進行頁面刷新的時候，導致頁面的數據丟失，出現這個問題的原因是因為當用vuex做全局狀態管理的時候，store中的數據是保存在運行內存中的，頁面刷新時會重新加載vue實例，store中的數據就會被重新賦值，因此數據就丟失了，解決方式如下：方法一：
  • 一文讀懂 PySpark 數據框
    它是多行結構，每一行又包含了多個觀察項。同一行可以包含多種類型的數據格式（異質性），而同一列只能是同種類型的數據（同質性）。數據框通常除了數據本身還包含定義數據的元數據；比如，列和行的名字。 我們可以說數據框不是別的，就只是一種類似於SQL表或電子表格的二維數據結構。接下來讓我們繼續理解到底為什麼需要PySpark數據框。
  • 瀏覽器加載解析渲染網頁原理
    如果說資源緩存和網絡資源是瀏覽器要渲染頁面的資源實體，那資源加載器就是為瀏覽器實現頁面渲染提供資源數據的搬運工。下面通過Chrome瀏覽器來請求餓了嗎官網，在控制臺查看數據請求的資源加載過程，並且通過刷新頁面查看當頁面刷新時瀏覽器在緩存中取了哪些信息：接著我們再來刷新頁面看看取了哪些緩存數據：可以看到餓了嗎官網的緩存機制是將document主文件和js文件做了緩存處理。
  • UX辭典精譯 | 巧用這3種分頁模式,頁面加載不再生硬
    你可以簡單將它們理解為：-分頁，即多個頁面組合（想想那些在線商店程序）；-無限滾動，讓用戶產生所有內容都加載好的感覺，但實際上，信息是在上下滑動時才加載出來的（想想Instagram）；-加載更多按鈕，常出現在頁面底部，通過用戶點擊操作，出現更多信息（想想Google圖片）。
  • 深入理解圖片和框架的原生懶加載功能
    壓縮初始頁面的體積以提升加載速度；免於為用戶根本不會看到的內容浪費網絡請求。如果你之前讀過關於懶加載的其他文章，你就會明白，我們必須藉助各種不同的方式才能實現懶加載功能。而當原生 HTML 用 loading 特性支持懶加載功能後，那可就柳暗花明又一村了。目前僅有 Chrome 支持 loading 特性，但有望全面開花。
  • 【技術】Hybird App中原生頁面 VS H5頁面
    現在不少app已經使用H5頁面來代替原生頁面（即Hybrid APP），兩種方式具有不同的用戶體驗。剛好最近遇到公司想用H5頁面來代替原生頁面，了解了下，並把所有的問題以及知識點都記錄下來。原生頁面和H5頁面的優劣勢分析其各自的優劣勢也有很多前輩都已經總結過了，我稍微記錄並歸納下（本文中的相對/相比較都是針對這兩種方式而言的）。
  • 是時候延遲加載屏幕外的iframe了!
    對於圖片延遲加載的內置支持已經在 Chrome 76 中變成現實，稍後 Firefox 也支持了這一功能。另一個好消息是對於 iframe 延遲加載的內置支持也已經標準化，目前已經在 Chrome 和基於 Chromium 的瀏覽器中得到了支持。延遲加載是通過新增的 loading 屬性來實現的。
  • 一文徹底搞懂前端監控
    二、前端監控的目的 提升用戶體驗 更快的發現發現異常、定位異常、解決異常 了解業務數據，指導產品升級——數據驅動的思想三、前端監控的流程一方面方便將該用戶的所有監控信息建立聯繫，方便數據分析;另一方面通過該標識可以查看該用戶的所有操作，方便復現問題。3.1.2 性能信息頁面的性能直接影響了用戶留存率，，Google DoubleClick 研究表明：如果一個移動端頁面加載時長超過 3 秒，用戶就會放棄而離開。
  • 王者榮耀:玩家吹噓自己是國服鎧,進入加載頁面卻沉默了
    王者榮耀是一款十分受歡迎的手遊，在這款遊戲中，一共上線了94位英雄，其中的每一位英雄不僅擁有各種各樣的皮膚裝扮還有各自不同的技能。遊戲中有著眾多的遊戲模式，玩家可以根據自己的愛好來選擇。最終在一樓玩家的沉默下，三樓玩家放棄了鎧，選擇了關羽這位英雄，但是沒有想到的是遊戲剛剛進入加載頁面，三樓玩家就被打臉了。從加載頁面的標誌可以看出，原來一樓的鎧是真正的國服標誌，面對這個畫面，開局之後各路玩家紛紛表示快要被關羽笑死了，而三樓關羽則不好意思的說到：我吹牛還不行嗎。
  • 微信訂閱號頁面改版:推文封面可看到閱讀量、朋友讀過/分享等數據
    據運營研究社報導，在最新的安卓內測版微信中，訂閱號頁面已經發生了改版，現在可以直接在推文封面看到公眾號文章的「閱讀量」、「點讚」、「朋友讀過 / 分享」的數據。　　▲圖自 36 氪　　此外，在卡片頁面中，以往的「摘要」文字部分被取消顯示。最後，公眾號的標題的字體被整體加粗，色號也比之前更黑，變得更加醒目了。