背景

最近项目已经部署到客户环境中，客户也在进行各方面的功能测试，其中测试到一个页面时，发现了一个问题：

• 业务是这样的：进入终端的设置页面需要进行频道的各个方面的设置。有频道号码的修改，频道的排序。
• 由于此处的频道数据较多（>1000个），现在实现方案，是一次性全部加载出来。致使浏览器在渲染时，会出现渲染时间较长的问题，体验极差！
• 并且每次修改数据都会重新加载页面数据，第二个问题就会暴露的更为严重。

解决方案

页面无限滚动。

• 无限滚动有很多方案：
  • 一种是首次加载第一页，在往下滚动时，逐步加载第二页，第三页，以此类推，直至加载全部数据。
  • 第二种是，首次加载第一页，在往下滚动时，逐步加载第二页，等加载到第三页时，删除第一页数据，这样每次用户看到数据都是固定的数据量。
• 因为需求所限，在每次进行修改时，页面的数据需要进行刷新，这样一来，必须摒弃掉第一种方案，采用第二个方案。

实现思路

• 首页直接从服务器获取数据，将此数据进行缓存。
• 然后每次滚动页面，滚动到需要加载数据的临界点时，直接从缓存中提取下一页或者上一页的数据，加载到页面数据中。

• 流程图

  
  流程图