性能优化是软件开发中必备的一个技能,,而图像又是其中影响性能最大的一个方面.早该记录整理一下在iOS开发中对图像的优化技巧了.
使用模拟器的测试工具可以查看当前项目中图片的性能情况.
image.png
-
Color Blended Layers
这个选项基于渲染程度对屏幕中的混合区域进行绿到红的高度(也就是多个半透明图层的叠加) -
Color Misaligned images
会高亮那些被缩放或者拉伸以及没有正确对齐到像素边界的图片(也就是非整型坐标)
这些中的大多数通常会导致图片的不正常缩放,如把一张大图当作缩略图显示,或者不正确地模糊图像 -
Color Copied Images
有时候 寄宿图片(layer.content)的生成是由Core Animation被强制生成一些图片,然后发送到渲染服务器,而不是简单的指向原始指针.
这个选项把这些图片高亮为蓝色
复制图片对内存和CPU来说都是一项昂贵的操作,所以应该尽可能的避免 -
Color Offscreen-Rendered(离屏渲染)
开启后会把离屏渲染的图层高亮成黄色
` 以上性能优化中, 有效的检测 混合模式 和 拉伸图像 在开发中能够提升图像的性能
` 离屏渲染主要用于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,以及它们要做多少事情..
网友评论