Cocos2DX UIListView 大量加载优化方案

问题来了

 
 

  
  笔者最近开发一个游戏项目，需要对 
   的加载速度做处理 —— 产品经理希望它可以快速加载100个
  ，且不能有卡顿的感觉。那么，问题来了，怎么样才能使
  做到快速而不卡顿呢？
作为程序，只有我们知道技术的实现细节。我们知道，
   是一个一个
  的，你急也没用。当时我试过了常规的三种方法，它们分别是：

  
  
 
   
逐帧加载
 
   
延时加载
 
   
滚动到底部再加载
 
  
方法1、2在实质上是一样的，都属于 延时加载 的范畴；方法3比较有趣，只有当 
   监听到自己滑动到底部的时候才会去加载剩下的一部分，当然我们需要开启它的滑动监听。
  
  如果有需要，我会在之后介绍一下这三种常规做法，这里先不作议论。

诚然，当数量不多的时候
  
  (比如 <= 100)，这三种常规方法的加载速度也算是无可厚非了。从速度上看，
  ；但从体验上看，
  。这是因为方法3开始只会加载一小部分，所以你需要不停地滑动到底部、滑动到底部，直到将所有内容全部加载完毕，而方法1、2只要启动之后，就会按部就班地开始一条一条的加载。

当数量超过一定数值
  
  (可能 >= 100，主要看需要渲染和处理Item的数据大小)后，你会发现 
   总是一顿一顿的，当你尝试滑动的时候，这种卡顿的感觉会尤其明显，这极其影响用户的体验。
 
 
问题分析

 
 

  
  当然，如果你足够细心和机警，你会发现造成卡顿至少有两层原因：

  
  
 
   
其一，数量太多，如果是1000条数据，就算0.001秒加载一条，也需要1秒才能全部加载完，你觉得用户可以接受1秒钟的卡顿吗？
 
   
其二，要渲染和处理的数据太多。在实际开发中，可不止加载这回事，你还得负责对每条  要展示的数据进行初始化，而这个往往才是极其耗时的步骤；所以说实现上述0.001秒的目标也是有些难度的。
 
  

 
 
解决方案
原理

 
 


  
  
 
   
综述：加载大概做了两件事情：初始化和渲染。围绕这两点，可以对其展开优化。
 
   
节省初始化的时间：加载单纯的速度是很快的，对渲染的消耗是很可观的。假设在加载一个的时候，用一个去 包装 它，但对所包含的数据不进行初始化「当然，程序需要预留一个初始化数据的接口」，那么，加载的相当于只有，这样可以大大地节省掉初始化的时间。
 
   
节省渲染的时间：对可视区域内的予以初始化，而非可视区域内的则不提供初始化和渲染。
 
  

 
 
实现

 
 


  
  
 
   
如何操作初始化？ 原理处已经提到，由程序预留初始化接口，当进入可视区域时再执行初始化。
 
   
如何减少渲染？ 这里采用了简单粗暴的方式：显示和隐藏。当进入可视区域时显示，出了可视区域后隐藏。当然，如果有更好的办法，可以提出、讨论、一起实现「中也预留了释放资源的回调方法，目前为空回调」。
 
   
怎么提高加载速度？ 如果数量不多，可以直接添加；如果是大数量级别，请使用延时加载或者每帧加载。
 
  

 
 
说明

 
 


  
  
 
   
目前只实现了常用的 垂直 的加载方案；水平 的貌似没有这个需求，所以就不打算做了。毕竟，有哪个傻逼愿意水平滑动大量的啊。
 
   
获得可视区域底部所在行数方法返回的值可能不是非常精准，在未想到更好的办法之前，如果遇到这种情况，请暂时手动调整；
 
   
经测试，在加载完可视区域内的后，渲染的顶点数基本稳定在一定数值。当然，当可视区域内可容纳最大数量发生变化时，也会随之变化，比如顶部和底部各露出一小部分的情况。
 
   
的初始化可以放在滚动回调里完成，也可以自行完成，具体开发中可能会遇到各种奇怪奇葩的需求，这时候，请根据实际情况自行调整初始化战略。
 
  

 
 
代码传送门

 
 

  
  GitHub UIListViewTest
 
 


查看原文：http://www.51xyyx.com/3196.htmlUIListViewItemUIListViewUIListViewPushItemUIListView方法3 > 方法1 > 方法2方法1 > 方法2 > 方法3UIListViewItemUIListViewItemUIListViewLayoutItemLayoutItemItemUIListViewItemLayoutUIListViewItemItemItemItemUIListViewTest.luaItemUIListViewitemItemItemsOpenGLGL vertsItemGL vertsItemItemUIListView