前言
每頁返回500條的資料，前端一次渲染使用者體驗很不好，有哪些方式可以友好的解決這個問題。
分批載入
雖然後端返回了500條資料，但是考慮到以下兩點我們並不需要一次性展示500條。
- ui上並無法展示500條資料，所以一次性渲染500條也沒有必要，使用者也許只需要看前面20條；
- 必要時載入，在我們大多數的資料請求以及互動請求中，都是必要時載入，懶載入。那麼我們也是這樣考慮的。
分批的臨界值是多少合適呢
一般情況下我們會設定1.5屏到2屏的資料，用來給使用者進行初始展示。這裡我們吧後端返回的頁面資料與ui的資料分兩部分維護。
像百度的圖片載入就是每次請求兩頁的資料，用來給使用者體驗。
let pageData = [] //len 500let uiData = [] //len 20複製程式碼寫一個loadUiData 以及loadPageData 的方法
既然假定了使用者是基於滾動載入得到更多資料的，那麼我們需要兩個方法，分別獲取ui展示的資料，以及每個頁面的資料，uiData作為累加值。
每次滾動載入時呼叫loadUiData,使得uiData.concat(pageData[20,40]),然後記錄頁數和總資料數，當發現ui的資料已經把當前請求的資料都載入完時，請求新的頁面資料（以及loadPageData），然後再呼叫追加頁面資料的一頁數量。
載入的時機
剛才講到分批載入，那麼作為分批載入時，一般情況是載入1.5屏或者兩屏的資料，當我們發現我們的最後一條資料距離視口還有0.5或者0.3屏時會自動載入，這種是屬於隱性無感知的載入；還有一種是明顯感知的，是使用者距離底部30-50px時，有底部載入的動畫或者全屏載入的動畫，然後看到新的資料渲染出。
當然也有的站點是滾動到螢幕底部然後再請求資料的。
滾動優化一
我們追加scroll的事件監聽，發現其會滾動很多次，重複觸發載入事件，對於這樣的事件觸發我們要加節流或者防抖。控制請求頻率。
另外需要注意的時，需要判斷當前資料的渲染情況以及滾動情況，在資料沒有完全渲染完，使用者的滾動條位置還沒有到齊位置時，是沒有必要載入新的資料的。
要切實的保證，使用者的所有載入好的資料展示部分拉到了底部，並且觸發了操作，才請求資料，已經在請求資料的過程中不要重複請求。
另外，如果我們的載入資料方法效能不是很好，建議針對自己的使用者體驗提升方面可以定義自己的滾動監聽時機和每次載入的數量，具體衡量是檢視一次通訊代價高還是查詢大量資料代價高。
滾動優化二
如果你覺得上面的滾動效果不是很好，可以啟用css加速，使用一些較好的滾動控制元件來提升滾動體驗本身。
有些css視覺滾動差的外掛也是不錯的方式。
更多
更多優化思路在後續分享中。。。