Gif展示对比和优化

由于前两年的大量需求开发导致我们核心业务中功能堆积非常严重,同时也衍生出了很多性能相关的问题,近期开始着手安排现有功能的优化,而优化的第一步先从图片展示开始。

发现问题

我们APP中的某个页面是支持展示动态背景,即gif图片的展示,而且因为图片中包含用户希望展示的某些信息,因此产品要求图片的质量必须要求非常高,因此我们不能将图片过度压缩。

鉴于我们的图片资源全部都存放在阿里云中,阿里云也支持图片的缩放和裁剪功能,因此首先对于图片的缩放我们是直接使用了阿里云自带动态拼接图片地址参数的方式实现,根据图片展示时的大小动态配置图片地址。

举个🌰:

我们有一张全屏展示的图片,那么在iPhone X上他展示的图片地址为:

1
http://res.xxx.com.cn/a6a5526e-c226-4e83-b53a-93f1c0cb6141.gif?t=1606124930287&x-oss-process=image/resize,m_mfit,w_1125,h_2436

我们可以看到图片地址后面是拼接了我们根据屏幕获取到的宽高然后乘屏幕的系数(1x,2x,3x)。

项目中目前使用的图片展示和下载库为SDWebImage,以上面的图为例,展示过程中CPU和内存占用如下图(未加载图片前内存占用8.4M):

内存 CPU
FLAnimatedImageView 13.1M 8%

对于这张图片的信息:

大小 尺寸
1.1M 404x702

当然在优化过程中由于设计部门提出iOS端在动画展示过程中卡顿的问题,我们升级了SDWebImage至最新版本,我们惊喜的发现动图展示不卡了,但是内存消耗确非常感人。

内存 CPU
SDAnimatedImageView 36.7M 0%

通过对比我们发现,升级后的SD,Gif图片展示不再卡顿的原因是将图片放到了缓存中,因此CPU利用率也降低了,但是内存(32.3M)接近之前版本(4.7M)的7倍。

因此,这篇文章主要也是针对这个问题,看下市面上几个常用的图片加载库,在展示图片过程中的性能比较。

性能对比

在iOS开发中我们常用的图片展示库主要有:YYWebImage/SDWebImage/FLAnimateImage

那么我们通过展示同一张动图和静图来对比下这三个三方的性能:

接着我们在来看下静态图的性能对比(都是使用UIImageView展示):

计数选型