异步绘制Cell解决列表快速滚动造成的卡顿

前言

本文是一种解决tableview快速滚动时引起的掉帧方案,如果有更好的思路可以指出.

本文对应github链接

本文参考和学习了YY大佬的文章链接和这个异步绘制cell的项目链接.看本文前请至少看完YY前辈的这篇文章!

解决思路

整体思路上就是在时间上提前计算,在空间上减少计算量,高效利用CPU资源!

• 1 不使用AutoLayout,直接使用Frame布局
• 2 减少控件数量
• 3 将圆角切割这样的事情不要使用离屏渲染这样的做法,而是直接画出来
• 4 将异步请求url的图片利用CALayer绘制
• 5 将其他控件利用异步绘制到一张图片,最后回到主线程展现图片
• 6 控制异步绘制线程数量,因为大量的切换线程实际上是一个极其消耗资源的过程
• 7 快速滚动时提供一种机制能取消绘制
• 8 其他可以采用的优化本文却没有使用的,欢迎补充

1 不使用AutoLayout,直接使用Frame布局

一般在MVC中tableView绘制,在数据源代理中会给cell传入Model,然后通过计算AutoLayout对应的Frame展示数据,我们可以把这个计算提前,在获取数据的时候就把布局,cell高度,展示内容计算好,渲染的时候直接拿来用就好了.思想上其实类似MVVM中cell的VM,只不过这个"VM"专门负责计算数据位置以及展示内容罢了.

如何使用请查看demo中CellLayout文件,下面举个例子:

2 减少控件数量

我的做法是,除了需要异步加载的图片使用CALayer,其他的全部成一张图片,这样渲染的时候就不会对层级进行计算了.

3 将圆角切割这样的事情不要使用离屏渲染这样的做法,而是直接画出来

直接使用CGContext把他画出来,不要用离屏渲染这样的做法,他十分的消耗性能!

4 将异步请求url的图片利用CALayer绘制

我们这里的图片仅仅是展示就足够了,所以用消耗资源较少的CALayer是一个不错的思路,另外在YYKit中对CALayer异步加载图片提供了一个类似SDWebimage的方法,不同的是加载的时候限制了开启并发线程的数量,这样不会因为开辟大量线程而造成资源浪费.

5 将其他控件利用异步绘制到一张图片,最后回到主线程展现图片

这一步是这个优化方案中最核心的一步,利用CPU的多核优势,对本来应该展现的控件做一个异步的绘制,最后绘制完毕后回到主线程进行渲染,这里只截取部分关键代码,我把其他一些重复动作会删除掉.做完这一步其实已经能保证在iPhone6上是60帧了,下面的优化也只是为了能做的更好一些.

6 控制异步绘制线程数量,因为大量的切换线程实际上是一个极其消耗资源的过程

这一步上面在异步请求url图片时提到过,这里我主要是为了控制异步绘制线程的数量,这个数量和CPU的核心数相等,例如A11给到了6个线程.

7 快速滚动时提供一种机制能取消绘制

这里使用了一个全局变量来控制,我们每绘制一个控件都会判断这个BOOL值,如果已经不需要绘制了,那么这个他就会被Return掉,所以你在一些性能较低的手机上运行本Demo,在极快速滑动时会发现有的cell是空白的,这表示他在绘制的过程中就已经被停止掉了.这里可能交互上不是很美观,在第八条中会提供相应的解决方案.

8 其他可以采用的优化本文却没有使用的

我们可以在快速滚动时使用一个外壳来展示,例如这样的效果

代码和思路大致如下,这里因为没有相关素材就没有去写了

后记

目前的所学知识暂时只能优化到这里了,有什么好的方案欢迎大家指出,另外我们平时的优化也绝对不是这样去做的,而是应该先写出来,再利用一些性能优化工具对一些消耗性能的地方进行逐步优化,我这里只是为了学习和总结做的一个demo.

再来看一下这里的效率问题,毫无疑问在没有特别的需求要求下,利用AutoLayout明显开发速度,以及项目的维护性上是高于我这样的做法的,所以具体怎样做要看取舍了.

在绘制上想再优化的话大概就只有用Metal或者OpegnGL ES去做了,iOS11后渲染全部已经是Metal了.