UITableView性能优化

最近遇到一个需求,对tableView有中级优化需求,要求 tableView 滚动的时候,滚动到哪行,哪行的图片才加载并显示,滚动过程中图片不加载显示; 页面跳转的时候,取消当前页面的图片加载请求;

以最常见的cell加载webImage为例:

解释下cell的复用机制:

如果cell没进入到界面中(还不可见),不会调用- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath去渲染cell,在cell中如果设置loadImage,不会调用; 而当cell进去界面中的时候,再进行cell渲染(无论是init还是从复用池中取) 

解释下YYWebImage机制:

内部的YYCache会对图片进行数据缓存,以key:value的形式,这里的key = imageUrl,value = 下载的image图片,读取的时候判断YYCache中是否有该url,有的话,直接读取缓存图片数据,没有的话,走图片下载逻辑,并缓存图片

问题所在:

如上设置,如果我们cell一行有20行,页面启动的时候,直接滑动到最底部,20个cell都进入过了界面,- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath被调用了20次,不符合 需求1的要求

解决办法:

cell每次被渲染时,判断当前tableView是否处于滚动状态,是的话,不加载图片;cell 滚动结束的时候,获取当前界面内可见的所有cell,在2的基础之上,让所有的cell请求图片数据,并显示出来。

UITableView的圆角性能优化如何实现

1.让服务器直接传圆角图片;2.贝塞尔切割控件layer;

YYWebImage为例,可以先下载图片,再对图片进行圆角处理,再设置到cell上显示YYWebImage 如何设置圆角? 在下载完成的回调中?如果你在下载完成的时候再切割,此时 YYWebImage 缓存中的图片是初始图片,还是圆角图片?(终于等到3了!!)

如果是下载完,在回调中进行切割圆角的处理,其实缓存的图片是原图,等于每次取的时候,缓存中取出来的都是矩形图片,每次set都得做切割操作;

解决办法

简单来说YYWebImage 可以拆分成两部分,默认情况下,我们拿到的回调,是走了 download&& cache的流程了,这里我们多做一步,取出cache中该url路径对应的图片,进行圆角切割,再存储到 cache中,就能保证以后每次拿到的就都是cacha中已经裁切好的圆角图片

你可能感兴趣的:(UITableView性能优化)