背景

最近專案已經部署到客戶環境中，客戶也在進行各方面的功能測試，其中測試到一個頁面時，發現了一個問題：

• 業務是這樣的：進入終端的設定頁面需要進行頻道的各個方面的設定。有頻道號碼的修改，頻道的排序。
• 由於此處的頻道資料較多（>1000個），現在實現方案，是一次性全部載入出來。致使瀏覽器在渲染時，會出現渲染時間較長的問題，體驗極差！
• 並且每次修改資料都會重新載入頁面資料，第二個問題就會暴露的更為嚴重。

解決方案

頁面無限滾動。

• 無限滾動有很多方案：
  • 一種是首次載入第一頁，在往下滾動時，逐步載入第二頁，第三頁，以此類推，直至載入全部資料。
  • 第二種是，首次載入第一頁，在往下滾動時，逐步載入第二頁，等載入到第三頁時，刪除第一頁資料，這樣每次使用者看到資料都是固定的資料量。
• 因為需求所限，在每次進行修改時，頁面的資料需要進行重新整理，這樣一來，必須摒棄掉第一種方案，採用第二個方案。

實現思路

• 首頁直接從伺服器獲取資料，將此資料進行快取。
• 然後每次滾動頁面，滾動到需要載入資料的臨界點時，直接從快取中提取下一頁或者上一頁的資料，載入到頁面資料中。
• 流程圖