Cocos2DX UIListView 大量加载优化方案

问题来了

 
 

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

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

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

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

 
 

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

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

 
 
解决方案
原理

 
 


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

 
 
实现

 
 


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

 
 
说明

 
 


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

 
 
代码传送门

 
 

  
  GitHub UIListViewTest
 
 


查看原文：http://www.51xyyx.com/3196.html