iOS-关于图像的性能优化方案

2017-05-02  本文已影响234人  Zafir_zzf

性能优化是软件开发中必备的一个技能,,而图像又是其中影响性能最大的一个方面.早该记录整理一下在iOS开发中对图像的优化技巧了.

使用模拟器的测试工具可以查看当前项目中图片的性能情况.

image.png
` 以上性能优化中, 有效的检测 混合模式 和 拉伸图像 在开发中能够提升图像的性能
` 离屏渲染主要用于cell的性能优化

直入主题.开启Color Misaligned images 图片变黄需要拉伸的情况.

如图:

黄高亮代表需要拉伸.png

这个列表中cell的图片都是从网络获取,大小不定,都放在这个大小为100 * 100的ImageView里,图片会因为尺寸不一而进行拉伸.所以为黄色...并且快速滑动列表的时候FPS会降低到42左右.
解决办法呢就是,在获取到照片之后,利用(Core Graphics)绘制一张与将要填充的UIImageView尺寸相等的图片,然后再赋值,尺寸相等后就免去了GPU拉伸消耗

注: Core Graphics的绘制过程是完全由CPU完成的,因此也叫软件绘图,虽然会消耗些CPU,但是之后这些图片出现在屏幕上时不会再有拉伸操作了.
// 重绘过程
extension UIImage {
  func compressImage(size: CGSize) -> UIImage? {
        UIGraphicsBeginImageContextWithOptions(size, true, 0)
        let rect = CGRect(origin: CGPoint(), size: size)
        draw(in: rect)
        let resultImage = UIGraphicsGetImageFromCurrentImageContext()
        UIGraphicsEndImageContext()
        return resultImage
    }
}

UIGraphicsBeginImageContextWithOptions(size, true, 0) //第二个参数是设置图片是否是不透明的,,透明的话会有性能问题

这个函数需要传入一个图片显示时候的size..但是有时候图片显示的大小并不是一开始就知道的.比如瀑布流中的图片...这是这个优化的局限性.
这个新绘制出来的UIImage不仅可以解决图片拉伸的消耗问题,还能降低内存的占用,因为一般情况下图片的大小是大于要显示的尺寸大小的..如果是瀑布流中的图片不方便确定最终大小,也可以不传入尺寸,重绘一张图片也会降低内存的占用.


image.png

这里图片的大小是固定的,在图片下载来之后调用上述方法再赋值ImageView..再次运行发现图片没有了黄色高亮...
但是快速滑动之后FPS还是会降低到40左右..看来这项优化对整体性能的影响还是很有限的.不过用Instruments监测GPU的使用率发现比在优化之前减少了不小.
此处FPS低还可能受Autolayout等影响.下一章再讨论tableView的优化.

开启Color Blended Layers 出现红色高亮的情况 与高性能的切圆角

虽然使用核心绘图进行重绘也是一种消耗,<iOS核心动画高级技巧>中建议除非不得已不然不要进行重绘,因为它相比"Core Animation"使用CALayer效率低且差,不过它应该是指各种动画效果.但是目前对于图片的优化来说,重绘确实可以做到对图片的性能提高.
红色高亮一般是因为图片是PNG并且有半透明的效果,像上面提到的,透明都了会增加性能的负担.
UIGraphicsBeginImageContextWithOptions(size, true, 0)
在重绘的时候第二个参数设置为true即可去掉透明效果.

不透明的图片.png
但是原本透明的部分现在变成了难看的黑色,,与背景白色很违和,这不是我们想要的目的...总不能为了优化,功能效果都变了..
因此我们需要加入一个参数,把不违和的背景色填充到图片中.
func circularImage(size: CGSize, backColor: UIColor) -> UIImage? {
        UIGraphicsBeginImageContextWithOptions(size, true, 0)
        let rect = CGRect(origin: CGPoint(), size: size)
        //填充背景色
        backColor.setFill()
        UIRectFill(rect)
        
        draw(in: rect)
        let resultImage = UIGraphicsGetImageFromCurrentImageContext()
        UIGraphicsEndImageContext()
        return resultImage
    }

这样,虽然图片已经被优化为非透明的图片,但是与透明图片的效果无差.

高效的切圆角.加边框

贝塞尔曲线自带生成圆形的路径path..而且还有切割当前上下文的函数

 func circularImage(size: CGSize, backColor: UIColor) -> UIImage? {
        UIGraphicsBeginImageContextWithOptions(size, true, 0)
        let rect = CGRect(origin: CGPoint(), size: size)
        //填充背景色
        backColor.setFill()
        UIRectFill(rect)
        //切圆角
        let path = UIBezierPath(ovalIn: rect)
        path.addClip()
        draw(in: rect)
        let resultImage = UIGraphicsGetImageFromCurrentImageContext()
        UIGraphicsEndImageContext()
        return resultImage
    }

新加这两行代码便可完成切圆.
再加一个边框的话同样是利用这个path

 func circularImage(size: CGSize, backColor: UIColor) -> UIImage? {
        UIGraphicsBeginImageContextWithOptions(size, true, 0)
        let rect = CGRect(origin: CGPoint(), size: size)
        //填充背景色
        backColor.setFill()
        UIRectFill(rect)
        //切圆角
        let path = UIBezierPath(ovalIn: rect)
        path.addClip()
        draw(in: rect)
        //加圆框
        path.lineWidth = 5
        UIColor.orange.setStroke()
        path.stroke()
        
        let resultImage = UIGraphicsGetImageFromCurrentImageContext()
        UIGraphicsEndImageContext()
        return resultImage
    }
切圆,加圆框后的效果.png

至此,这两种常见的需要优化的图片情况基本解决了.因为手边只有iPhone6,,测试了几个demo还未发现因为图片拉伸或透明导致的性能问题...一个有130张需要拉伸的高清图片demo,可能demo条件不足,滑动起来FPS仍然60..有机会用一个4S测试一下..

CPU VS GPU

CPU(中央处理器), GPU(图形处理器)..在iOS设备中,都有可以运行不同软件的可编程芯片,总的来说,CPU所做的工作在软件层面,GPU在硬件层面.
使用CPU可以做任何事情,,但是对于图像处理,GPU可以使用图像对高度并行浮点运算做了优化,所以iOS设备把 屏幕图像的渲染交给了GPU... CPU负责计算要显示的内容,,提交给GPU,去渲染.

动画和屏幕上的组合图层实际上被一个单独的进程管理,而不是你的应用程序,这个进程就是所谓的 渲染服务

当图层进行打包发送到渲染服务之后就不是我们能掌控的事情了..但是在渲染之前,我们可以进行一切操作来决定哪些交给CPU,哪些给GPU,以及它们要做多少事情..

上一篇下一篇

猜你喜欢

热点阅读