項目遇到的問題以及解決方法---小程序頁面因數據量大帶來問題的優化

一 、問題描述:小程序開發中開發一個城市列表選擇頁,如下:
在這裏插入圖片描述
但是由於接口返回的城市數量過多,導致首屏白頁的問題:
在這裏插入圖片描述
怎麼優化這個問題?
1. 首先考慮是把接口返回數據存儲爲本地文件,進行本地加載,可以節約請求回顯時間,但是這種做法並沒有使問題獲得改善,這表示接口返回應該是很快的,請求或者本地並不是主要影響,那麼主要影響可能是在真機上數據太大導致列表渲染耗時太長。
2. 採用本地、分段加載:把按照A-Z的城市列表分爲兩段,第一段較短,可以比較快的加載出來,解決白頁問題,儘管白頁問題解決了,但是由於數據採用分段,下半段數據可能並沒有加載完,導致用戶在剛進去立即點擊城市或者索引的時候,點擊無效,那這怎麼辦?
3. 對於2中剛進去立即點擊城市無效考慮可能是第二段加載還沒完成導致的,那對於2我們還可以怎麼優化呢?我們可以從用戶角度思考,用戶進來之後可能會有三種操作,這三種操作涉及三個函數:點擊可以看到的城市(基本是熱門城市)(cityTap);點擊字母索引(clickLetter);滑動(bindScroll)。其中第一種操作不會涉及到第二段加載,後兩種操作會涉及到第二段加載,那就可以考慮對用戶第一種操作優化: 爲了能讓用戶剛進來點擊城市能夠成功,我們可以在此時讓第二段先不在加載。
4. 針對3中描述的具體做法是對第一段加載和第二段加載設置標誌位:firstdata=0和seconddata=0, 首屏僅加載第一段並把firstdata設爲1,那當前和熱門城市都可以用firstdata控制展示;只有當用戶點擊字母索引或者滑動時候(clickLetter,bindScroll)在加載第二段,並把seconddata=1.

總結:針對數據量大的頁面,可以在滿足用戶需求一步步優化。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章