導語:App中顯示的圖片大部分來自服務器,一般使用SDWebImage幫我們下載并顯示售淡,但是這并不是最好的效果挤巡,本文介紹如何優(yōu)化網絡圖片的顯示。
友情提示:性能優(yōu)化是個無底洞浮庐,建議適可而止。
一柬焕、存在的問題
1.像素不對齊
由于網絡圖片一般不會有@2x和@3x之分审残,通過SDWebImage庫下載的圖片不加以處理就直接顯示。
像素不對齊是指物理像素(pixel)不對齊斑举;出現像素不對齊搅轿,會導致GPU在渲染時,對沒對齊的邊緣富玷,進行插值計算璧坟,造成性能損耗了没宾。
當圖片的size和顯示圖片View的size不同 或 圖片的scale和屏幕的scale不同,就會發(fā)生像素不對齊的問題沸柔。
iPhone模擬器中的Debug -> Color Misaligned Images選項 或Core Animation->Display Settings->Color Misaligned Images選項都可以將像素不對齊的部分顯示出來。
當UIView(及其子類)的frame像素不對齊顯示洋紅色铲敛;當圖片的像素大小與控件的大小不一致褐澎,顯示黃色察藐。
2.像素混合
像素混合是指在某視圖為透明背景色凉袱,GPU在渲染視圖時,需要將該視圖和下層視圖混合(Blend)后才能計算出該像素點的實際顏色讲冠;這增加了GPU的工作先鱼,損耗了性能俭正。
當圖片是透明圖片時,像素混合必然會發(fā)生焙畔。
iPhone模擬器中的Debug ->Color Blended Layers選項 和 Core Animation ->Display Settings ->Color Blended Layers都可以將像素混合的部分顯示出來掸读。
發(fā)生了像素混合的區(qū)域顯示紅色,正常則顯示綠色宏多。
3.離屏渲染
- App中經常使用圓角圖片儿惫,如果通過設置cornerRadius值和masksToBounds=YES實現圓角效果。因為它會觸發(fā)GPU的離屏渲染伸但,引起性能問題肾请。模擬器中的Color Offscreen-Rendered可以檢測是否發(fā)生離屏渲染(如果出現黃色就發(fā)生了離屏渲染)。
</br>
二更胖、解決方案
1.像素不對齊
- 要想像素對齊铛铁,必須保證image.size和顯示圖片view.size相等 且 image.scale和 [UIScreen mainScreen].scale相等∪捶粒可以在網絡圖片下載完成后進行壓縮裁剪等操作在進行渲染饵逐。
2.像素混合
- 設置圖片為不透明,可以設置背景顏色為白色管呵。
3.離屏渲染
- 離屏渲染是圖片圓角處理中討論比較多的問題梳毙,一般利用Core Graphics繪制。