iOS UITableView 图片刷新闪烁问题记录

一. 问题背景

项目中遇到一个问题,就是当App不在首页的时候,切换到其他App比如微信,然后返回App当前页面,然后从当前页面返回首页,会在首页viewWillAppear这里去拉取是否有未完成订单的接口,刷新UITableView,这时会出现广告位闪烁问题。

二. 问题排查

1.原因分析

这个问题经过断点调试和排除法,发现只要当App进入后台后,回来刷新首页的UITableView都有可能出现闪烁现象。

因此首先我们对图片的加载做延迟操作,并在Cell生成方法调用里面添加相关打印:

可以看到如下打印日志:

从打印日志我们可以看出来,调用reloadData方法后,原来UITableViewcell位置会调整。

但是如果我们App没有进入后台,而是直接调用UITableViewreloadData方法,并不会出现闪烁现象。

因此可以这里可以推测应该是进入后台做了什么操作导致,回到App刷新才会导致闪烁。

因为使用的是SDWebImage加载框架加载,我们合理的怀疑是加载图片的SDWebImage框架,进入后台的处理逻辑导致的,因此我们先使用imageCacheDict字典写下图片加载和缓存逻辑:

经测试,进入后台,再返回App刷新不会出现闪烁现象。

因此可以肯定UITableView调用reloadData方法闪烁原因是SDWebImage,在进入后台的时候对内存缓存做了相关操作导致。

我们都知道SDWebImage,默认是使用NSCache来做内存缓存,而NSCache在进入后台的时候,默认会清空缓存操作,导致返回App调用UITableView调用reloadData方法时候,SDWebImage需要根据图片地址重新去磁盘获取图像数据,然后解压解码渲染,因为是从缓存磁盘直接获取图像数据,没有渲染流程,因此会造成闪烁。

为了验证这个猜想,我们使用YYWebImage加载框架来做对比实验:

  • 首先注释掉YYWebImage进入后台清空内存缓存的逻辑:
  • 然后进入后台,返回App调用UITableView调用reloadData刷新,发现一切正常。

原因总结:

  • 第一个原因是UITableView调用reloadData方法,由于UITableViewCell的复用,会出现Cell位置调整现象

  • 由于SDWebImage使用了NSCache做内存缓存,当App进入后台,NSCache会清空内存缓存,导致返回App后调用UITableView调用reloadData,刷新去加载图片的时候,需要从SDWebImage的磁盘中重新获取图片数据,然后重新解压解码渲染,因为从磁盘中读取速度快,两者原因导致了闪烁。

三. 解决方案

因为该现象是由如上两个原因导致,因此针对这两个原因,有如下两种解决方案:

  • 解决UITableViewCell复用问题

可以通过设置ReusableCellWithIdentifier不同,保证广告cell不进行复用。

ini 复制代码
 NSString *cellId = [NSString stringWithFormat:@"%ld-%ld-FJFAdTableViewCell", indexPath.section, indexPath.row];
  • 从后台返回后,提早进行刷新操作

当从后台返回App前台的时候或者视图添加到父视图的时候,先执行下UITableView调用reloadData方法,提前通过SDWebImage去从磁盘中加载图片。

从后台返回前台:

objectivec 复制代码
[NSNotificationCenter.defaultCenter addObserver:self selector:@selector(willEnterForeground) name:UIApplicationWillEnterForegroundNotification object:nil];
- (void)willEnterForeground {
    [self.tableView reloadData];
    NSLog(@"--------------------------willEnterForeground");
}

视图添加到父视图:

objectivec 复制代码
- (void)willMoveToParentViewController:(UIViewController *)parent {
    [self.tableView reloadData];
}
相关推荐
摸鱼的春哥4 小时前
春哥的Agent通关秘籍07:5分钟实现文件归类助手【实战】
前端·javascript·后端
念念不忘 必有回响4 小时前
viepress:vue组件展示和源码功能
前端·javascript·vue.js
C澒4 小时前
多场景多角色前端架构方案:基于页面协议化与模块标准化的通用能力沉淀
前端·架构·系统架构·前端框架
崔庆才丨静觅4 小时前
稳定好用的 ADSL 拨号代理,就这家了!
前端
江湖有缘4 小时前
Docker部署music-tag-web音乐标签编辑器
前端·docker·编辑器
恋猫de小郭5 小时前
Flutter Zero 是什么?它的出现有什么意义?为什么你需要了解下?
android·前端·flutter
崔庆才丨静觅12 小时前
hCaptcha 验证码图像识别 API 对接教程
前端
passerby606113 小时前
完成前端时间处理的另一块版图
前端·github·web components
掘了13 小时前
「2025 年终总结」在所有失去的人中,我最怀念我自己
前端·后端·年终总结
崔庆才丨静觅13 小时前
实用免费的 Short URL 短链接 API 对接说明
前端