UIKit性能調(diào)優(yōu)實(shí)戰(zhàn)講解

在使用UIKit的過程中碴裙，性能優(yōu)化是永恒的話題。很多人都看過分析優(yōu)化滑動(dòng)性能的文章，但其中不少文章只介紹了優(yōu)化方法卻對背后的原理避而不談务傲，或者是晦澀難懂而且讀者缺乏實(shí)踐體驗(yàn)的機(jī)會(huì)。不妨思考一下下面的問題自己是否有一個(gè)清晰的認(rèn)識：

為什么要把控件盡量設(shè)置成不透明的枣申，如果是透明的會(huì)有什么影響售葡，如何檢測這種影響？

為什么cell中的圖片忠藤，盡可能要使用正確的大小挟伙、格式，如果錯(cuò)誤會(huì)有什么影響模孩，如何檢測這種影響像寒？

為什么設(shè)置陰影和圓角有可能影響滑動(dòng)時(shí)流暢度烘豹？

shouldRasterize和離屏渲染的關(guān)系是什么，何時(shí)應(yīng)該使用诺祸？

本文會(huì)結(jié)合Instrument分析影響性能的因素携悯，提出優(yōu)化方案并解釋背后的原理，項(xiàng)目初始demo的下載地址在我的Github筷笨，強(qiáng)烈建議每一位讀者下載下來隨著我一步一步調(diào)試憔鬼、優(yōu)化。如果覺得對自己有幫助胃夏，可以給一個(gè)Star表示支持轴或。后面的圖片較多，流量黨慎入仰禀。

基本概念

打開項(xiàng)目后照雁，只要CustomTableCell.swift文件即可，它實(shí)現(xiàn)了自定義的UITableViewCell以及內(nèi)部的UI布局答恶，因?yàn)橹攸c(diǎn)在于性能優(yōu)化饺蚊，代碼實(shí)現(xiàn)的就比較隨意。

首先按下Command + I打開Instrument悬嗓，本文主要用到的是Core Animation工具：

打開Core Animation調(diào)試

注意這個(gè)調(diào)試必須使用真機(jī)污呼，點(diǎn)擊左上角的紅色圓圈就會(huì)開始錄制。新手可能不太熟悉包竹，這里簡單介紹一下調(diào)試界面：

調(diào)試界面

我們需要了解兩個(gè)兩個(gè)區(qū)域：

這里記錄了實(shí)時(shí)的fps數(shù)值燕酷，有些地方是0是因?yàn)槠聊粵]有滑動(dòng)

這是重中之重，接下來我會(huì)帶大家逐個(gè)理解周瞎、體驗(yàn)這些調(diào)試選項(xiàng)

有過游戲經(jīng)驗(yàn)的人也許對fps這個(gè)概念比較熟悉苗缩。我們知道任何屏幕總是有一個(gè)刷新率，比如iphone推薦的刷新率是60Hz声诸，也就是說GPU每秒鐘刷新屏幕60次酱讶，因此兩次刷新之間的間隔為16.67ms。這段時(shí)間內(nèi)屏幕內(nèi)容保持不變双絮，稱為一幀(frame)浴麻，fps表示frames per second，也就是每秒鐘顯示多少幀畫面囤攀。對于靜止不變的內(nèi)容软免，我們不需要考慮它的刷新率，但在執(zhí)行動(dòng)畫或滑動(dòng)時(shí)焚挠，fps的值直接反映出滑動(dòng)的流暢程度膏萧。

調(diào)試、優(yōu)化

圖層混合

首先我們要明白像素的概念，屏幕上每一個(gè)點(diǎn)都是一個(gè)像素榛泛，像素有R蝌蹂、G、B三種顏色構(gòu)成(有時(shí)候還帶有alpha值)曹锨。如果某一塊區(qū)域上覆蓋了多個(gè)layer,最后的顯示效果受到這些layer的共同影響孤个。舉個(gè)例子，上層是藍(lán)色(RGB=0,0,1),透明度為50%沛简，下層是紅色(RGB=1,0,0)齐鲤。那么最終的顯示效果是紫色(RGB=0.5,0,0.5)。這種顏色的混合(blending)需要消耗一定的GPU資源椒楣，因?yàn)閷?shí)際上可能不止只有兩層给郊。如果只想顯示最上層的藍(lán)色，可以把它的透明度設(shè)置為100%捧灰，這樣GPU會(huì)忽略下面所有的layer淆九，從而節(jié)約了很多不必要的運(yùn)算。

第一個(gè)調(diào)試選項(xiàng)"Color Blended Layers"正是用于檢測哪里發(fā)生了圖層混合毛俏，并用紅色標(biāo)記出來炭庙。因此我們需要盡可能減少看到的紅色區(qū)域。一旦發(fā)現(xiàn)應(yīng)該想法設(shè)法消除它拧抖。開始調(diào)試后勾選這個(gè)選項(xiàng)煤搜，我們在手機(jī)上可以看到如下的場景：

Color Blended Layers

很多文章里說把控件設(shè)置為opaque = true免绿，其原理就是希望避免圖層混合唧席，然而這種調(diào)優(yōu)一般情況下用處不大。因?yàn)閁IView的opaque屬性默認(rèn)值就是true嘲驾，也就是說只要不是人為設(shè)置成透明淌哟，都不會(huì)出現(xiàn)圖層混合。比如demo中就沒有任何透明的控件辽故。

對于UIImageView來說徒仓，不僅它自身需要是不透明的，它的圖片也不能含有alpha通道誊垢，這就是為什么圖中第三個(gè)圖片是綠色掉弛，而前兩個(gè)圖片是紅色的原因。由于本人對PS和圖像幾乎一竅不通喂走，恕我不能演示如何消除這些圖片的紅色殃饿。我從網(wǎng)上找了一個(gè)美女的頭像來說明，圖像自身的性質(zhì)可能會(huì)對結(jié)果有影響芋肠，因此如果你確定自己的代碼沒有問題乎芳，而且出現(xiàn)了圖層混合，請聯(lián)系美工或后臺解決。

個(gè)人認(rèn)為比opaque屬性更重要的是backgroundColor屬性奈惑，如果不設(shè)置這個(gè)屬性吭净，控件依然被認(rèn)為是透明的，所以我們做的第一個(gè)優(yōu)化是在CustomTableCell類的init方法中添加一行代碼：

label.backgroundColor = UIColor.whiteColor()

雖然在白色背景下肴甸，這行代碼無法肉眼看到效果闷尿，但重新調(diào)試后我們可以發(fā)現(xiàn)label的紅色消失了洲愤。也正是因?yàn)閷Ρ尘邦伾牟恢匾暎闪擞绊懟瑒?dòng)性能的第一個(gè)殺手。

PS：如果label文字有中文泌霍，依然會(huì)出現(xiàn)圖層混合，這是因?yàn)榇藭r(shí)label多了一個(gè)sublayer捏雌，如果有好的解決辦法歡迎告訴我宴霸。

光柵化

光柵化是將一個(gè)layer預(yù)先渲染成位圖(bitmap)，然后加入緩存中澳泵。如果對于陰影效果這樣比較消耗資源的靜態(tài)內(nèi)容進(jìn)行緩存实愚，可以得到一定幅度的性能提升。demo中的這一行代碼表示將label的layer光柵化：

label.layer.shouldRasterize = true

Instrument中兔辅，第二個(gè)調(diào)試選項(xiàng)是“Color Hits Green and Misses Red”腊敲，它表示如果命中緩存則顯示為綠色，否則顯示為紅色维苔，顯然綠色越多越好碰辅，紅色越少越好。勾選這個(gè)選項(xiàng)后我們看到如下的場景：

Color Hits Green and Misses Red

光柵化的核心在于緩存的思想介时。我們自己動(dòng)手把玩一下没宾，可以發(fā)現(xiàn)以下幾個(gè)有意思的現(xiàn)象：

上下微小幅度滑動(dòng)時(shí)，一直是綠色

上下較大幅度滑動(dòng)沸柔，新出現(xiàn)的label一開始是紅色循衰，隨后變成綠色

如果靜止一秒鐘，剛開始滑動(dòng)時(shí)會(huì)變紅褐澎。

這是因?yàn)閘ayer進(jìn)行光柵化后渲染成位圖放在緩存中会钝。當(dāng)屏幕出現(xiàn)滑動(dòng)時(shí)，我們直接從緩存中讀取而不必渲染工三，所以會(huì)看到綠色迁酸。當(dāng)新的label出現(xiàn)時(shí)，緩存中沒有個(gè)這個(gè)label的位圖俭正，所以會(huì)變成紅色奸鬓。第三點(diǎn)比較關(guān)鍵，緩存中的對象有效期只有100ms段审，即如果在0.1s內(nèi)沒有被使用就會(huì)自動(dòng)從緩存中清理出去全蝶。這就是為什么停留一會(huì)兒再滑動(dòng)就會(huì)看到紅色闹蒜。

光柵化的緩存機(jī)制是一把雙刃劍，先寫入緩存再讀取有可能消耗較多的時(shí)間抑淫。因此光柵化僅適用于較復(fù)雜的绷落、靜態(tài)的效果。通過Instrument的調(diào)試發(fā)現(xiàn)始苇，這里使用光柵化經(jīng)常出現(xiàn)未命中緩存的情況砌烁，如果沒有特殊需要?jiǎng)t可以關(guān)閉光柵化，所以我們做的第二個(gè)優(yōu)化是注釋掉下面這行代碼：

//? ? label.layer.shouldRasterize = true

光柵化會(huì)導(dǎo)致離屏渲染催式，這一點(diǎn)待會(huì)兒會(huì)講函喉。

顏色格式

像素在內(nèi)存中的布局和它在磁盤中的存儲方式并不相同∪僭拢考慮一種簡單的情況：每個(gè)像素有R管呵、G、B和alpha四個(gè)值哺窄，每個(gè)值占用1字節(jié)捐下，因此每個(gè)像素占用4字節(jié)的內(nèi)存空間。一張1920*1080的照片(iPhone6 Plus的分辨率)一共有2,073,600個(gè)像素萌业，因此占用了超過8Mb的內(nèi)存坷襟。但是一張同樣分辨率的PNG格式或JPEG格式的圖片一般情況下不會(huì)有這么大。這是因?yàn)镴PEG將像素?cái)?shù)據(jù)進(jìn)行了一種非常復(fù)雜且可逆的轉(zhuǎn)化生年。

當(dāng)我們打開JPEG格式的圖片時(shí)婴程，CPU會(huì)進(jìn)行一系列運(yùn)算，將JPEG圖片解壓成像素?cái)?shù)據(jù)抱婉。顯然這個(gè)工作會(huì)消耗不少時(shí)間档叔，所以不應(yīng)該在滑動(dòng)時(shí)進(jìn)行，我們應(yīng)該預(yù)先處理好圖片授段。借用WWDC上的一頁P(yáng)PT來說明：

顯示流程

Commit Transaction和Decode在同一幀內(nèi)進(jìn)行蹲蒲，如果這兩個(gè)操作的耗時(shí)超過16.67s番甩，Draw Calls就會(huì)延遲到下一幀侵贵，從而導(dǎo)致fps值的降低。下面是Commit Transaction的詳細(xì)流程：

解碼與轉(zhuǎn)換

在第三步的Prepare中缘薛，CPU主要處理兩件事：

把圖片從PNG或JPEG等格式中解壓出來窍育，得到像素?cái)?shù)據(jù)

如果GPU不支持這種顏色各式，CPU需要進(jìn)行格式轉(zhuǎn)換

比如應(yīng)用中有一些從網(wǎng)絡(luò)下載的圖片宴胧，而GPU恰好不支持這個(gè)格式漱抓，這就需要CPU預(yù)先進(jìn)行格式轉(zhuǎn)化。第三個(gè)選項(xiàng)“Color Copied Images”就用來檢測這種實(shí)時(shí)的格式轉(zhuǎn)化恕齐，如果有則會(huì)將圖片標(biāo)記為藍(lán)色乞娄。

遺憾的是由于我對圖片格式不太了解，也不會(huì)使用相關(guān)工具，并沒有能模擬出觸發(fā)這個(gè)選項(xiàng)的場景仪或。我們要記住的是确镊，如果調(diào)試時(shí)發(fā)現(xiàn)有圖片被標(biāo)記為藍(lán)色，說明圖片格式出現(xiàn)了一些問題范删。

圖片大小

第四個(gè)選項(xiàng)的使用場景不多蕾域，我們直接看一下第五個(gè)選項(xiàng)“Color Misaligned Images”。它表示如果圖片需要縮放則標(biāo)記為黃色到旦，如果沒有像素對齊則標(biāo)記為紫色旨巷。勾選上這個(gè)選項(xiàng)并進(jìn)行調(diào)試，可以看到如下場景：

圖片縮放

在demo中添忘，每個(gè)UIImageView的大小都是180x180采呐，而只有第二張圖片的像素大小是360x360。因此除了第二張圖片搁骑，其他的圖片都需要被縮放懈万。圖片的縮放需要占用時(shí)間，因此我們要盡可能保證無論是本地圖片還是從網(wǎng)絡(luò)或取得圖片的大小靶病，都與其frame保持一致会通。

第三個(gè)優(yōu)化是調(diào)整所有圖片的像素大小以避免不必要的縮放。

離屏渲染

離屏渲染表示渲染發(fā)生在屏幕之外娄周，你可能認(rèn)為這是一句廢話涕侈。為了真正解釋清楚什么是離屏渲染，我們先來看一下正常的渲染通道(Render-Pass)：

正常渲染通道

首先煤辨，OpenGL提交一個(gè)命令到Command Buffer裳涛，隨后GPU開始渲染，渲染結(jié)果放到Render Buffer中众辨，這是正常的渲染流程端三。但是有一些復(fù)雜的效果無法直接渲染出結(jié)果，它需要分步渲染最后再組合起來鹃彻，比如添加一個(gè)蒙版(mask)：

離屏渲染

在前兩個(gè)渲染通道中郊闯，GPU分別得到了紋理(texture，也就是那個(gè)相機(jī)圖標(biāo))和layer(藍(lán)色的蒙版)的渲染結(jié)果蛛株。但這兩個(gè)渲染結(jié)果沒有直接放入Render Buffer中团赁，也就表示這是離屏渲染。直到第三個(gè)渲染通道谨履，才把兩者組合起來放入Render Buffer中欢摄。離屏渲染意味著把渲染結(jié)果臨時(shí)保存，等用到時(shí)再取出笋粟，因此相對于普通渲染更占用資源怀挠。

第六個(gè)選項(xiàng)“Color Offscreen-Rendered Yellow”會(huì)把需要離屏渲染的地方標(biāo)記為黃色析蝴，大部分情況下我們需要盡可能避免黃色的出現(xiàn)。離屏渲染可能會(huì)自動(dòng)觸發(fā)绿淋，也可以手動(dòng)觸發(fā)嫌变。以下情況可能會(huì)導(dǎo)致觸發(fā)離屏渲染：

重寫drawRect方法

有mask或者是陰影(layer.masksToBounds, layer.shadow*)，模糊效果也是一種mask

layer.shouldRasterize = true

前兩者會(huì)自動(dòng)觸發(fā)離屏渲染躬它，第三種方法是手動(dòng)開啟離屏渲染腾啥。

開始調(diào)試并勾選“Color Offscreen-Rendered Yellow”，會(huì)看到這樣的場景：

離屏渲染

如果沒有進(jìn)行第二步優(yōu)化冯吓，你會(huì)發(fā)現(xiàn)label也是黃色倘待。可以看到tabbar和statusBar也是黃色组贺，這是因?yàn)樗鼈兪褂昧四：Ч苟妗D片也是黃色，這說明它也進(jìn)行了離屏渲染失尖，觀察源碼后發(fā)現(xiàn)主要原因是它使用了陰影啊奄，接下來我們進(jìn)行第四個(gè)優(yōu)化，在設(shè)置陰影效果的四行代碼下面添加一行：

imgView.layer.shadowPath = UIBezierPath(rect: imgView.bounds).CGPath

這行代碼制定了陰影路徑掀潮，如果沒有手動(dòng)指定菇夸，Core Animation會(huì)去自動(dòng)計(jì)算，這就會(huì)觸發(fā)離屏渲染仪吧。如果人為指定了陰影路徑庄新，就可以免去計(jì)算，從而避免產(chǎn)生離屏渲染薯鼠。

設(shè)置cornerRadius本身并不會(huì)導(dǎo)致離屏渲染择诈，但很多時(shí)候它還需要配合layer.masksToBounds = true使用。根據(jù)之前的總結(jié)出皇，設(shè)置masksToBounds會(huì)導(dǎo)致離屏渲染羞芍。解決方案是盡可能在滑動(dòng)時(shí)避免設(shè)置圓角，如果必須設(shè)置圓角郊艘，可以使用光柵化技術(shù)將圓角緩存起來：

// 設(shè)置圓角

label.layer.masksToBounds = true

label.layer.cornerRadius = 8

label.layer.shouldRasterize = true

label.layer.rasterizationScale = layer.contentsScale

快速路徑

還記得之前將離屏渲染和渲染路徑時(shí)的示意圖么荷科，離屏渲染的最后一步是把此前的多個(gè)路徑組合起來。如果這個(gè)組合過程能由CPU完成暇仲，就會(huì)大量減少GPU的工作步做。這種技術(shù)在繪制地圖中可能用到。

第七個(gè)選項(xiàng)“Color Compositing Fast-Path Blue”用于標(biāo)記由硬件繪制的路徑奈附，藍(lán)色越多越好。

變化區(qū)域

刷新視圖時(shí)煮剧，我們應(yīng)該把需要重繪的區(qū)域盡可能縮小斥滤。對于未發(fā)生變化的內(nèi)容則不應(yīng)該重繪将鸵，第八個(gè)選項(xiàng)“Flash updated Regions”用于標(biāo)記發(fā)生重繪的區(qū)域。一個(gè)典型的例子是系統(tǒng)的時(shí)鐘應(yīng)用佑颇，絕大多數(shù)時(shí)候只有顯示秒針的區(qū)域需要重繪：

重繪區(qū)域

總結(jié)

如果你一步一步做到了這里顶掉，我想一定會(huì)有不少收益。不過挑胸，學(xué)而不思則罔痒筒，思而不學(xué)則殆。動(dòng)手實(shí)踐后還是應(yīng)該總結(jié)提煉茬贵，優(yōu)化滑動(dòng)性能主要涉及三個(gè)方面：

避免圖層混合

確辈就福控件的opaque屬性設(shè)置為true，確保backgroundColor和父視圖顏色一致且不透明

如無特殊需要解藻，不要設(shè)置低于1的alpha值

確保UIImage沒有alpha通道

避免臨時(shí)轉(zhuǎn)換

確保圖片大小和frame一致老充，不要在滑動(dòng)時(shí)縮放圖片

確保圖片顏色格式被GPU支持，避免勞煩CPU轉(zhuǎn)換

慎用離屏渲染

絕大多數(shù)時(shí)候離屏渲染會(huì)影響性能

重寫drawRect方法螟左，設(shè)置圓角啡浊、陰影、模糊效果胶背，光柵化都會(huì)導(dǎo)致離屏渲染

設(shè)置陰影效果是加上陰影路徑

滑動(dòng)時(shí)若需要圓角效果巷嚣，開啟光柵化