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

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

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

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

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

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

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

基本概念

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

首先按下Command + I打開(kāi)Instrument，本文主要用到的是Core Animation工具：

打開(kāi)Core Animation調(diào)試

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

調(diào)試界面

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

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

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

有過(guò)游戲經(jīng)驗(yàn)的人也許對(duì)fps這個(gè)概念比較熟悉。我們知道任何屏幕總是有一個(gè)刷新率，比如iphone推薦的刷新率是60Hz，也就是說(shuō)GPU每秒鐘刷新屏幕60次，因此兩次刷新之間的間隔為16.67ms。這段時(shí)間內(nèi)屏幕內(nèi)容保持不變，稱(chēng)為一幀(frame)，fps表示frames per second，也就是每秒鐘顯示多少幀畫(huà)面。對(duì)于靜止不變的內(nèi)容，我們不需要考慮它的刷新率，但在執(zhí)行動(dòng)畫(huà)或滑動(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"正是用于檢測(cè)哪里發(fā)生了圖層混合，并用紅色標(biāo)記出來(lái)。因此我們需要盡可能減少看到的紅色區(qū)域。一旦發(fā)現(xiàn)應(yīng)該想法設(shè)法消除它。開(kāi)始調(diào)試后勾選這個(gè)選項(xiàng)，我們?cè)谑謾C(jī)上可以看到如下的場(chǎng)景：

Color Blended Layers

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

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

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

label.backgroundColor = UIColor.whiteColor()

雖然在白色背景下，這行代碼無(wú)法肉眼看到效果，但重新調(diào)試后我們可以發(fā)現(xiàn)label的紅色消失了。也正是因?yàn)閷?duì)背景顏色的不重視，它成了影響滑動(dòng)性能的第一個(gè)殺手。

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

光柵化

光柵化是將一個(gè)layer預(yù)先渲染成位圖(bitmap)，然后加入緩存中。如果對(duì)于陰影效果這樣比較消耗資源的靜態(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)后我們看到如下的場(chǎng)景：

Color Hits Green and Misses Red

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

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

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

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

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

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

//? ? label.layer.shouldRasterize = true

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

顏色格式

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

當(dāng)我們打開(kāi)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上的一頁(yè)P(yáng)PT來(lái)說(shuō)明：

顯示流程

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

解碼與轉(zhuǎn)換

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

把圖片從PNG或JPEG等格式中解壓出來(lái)，得到像素?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”就用來(lái)檢測(cè)這種實(shí)時(shí)的格式轉(zhuǎn)化，如果有則會(huì)將圖片標(biāo)記為藍(lán)色。

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

圖片大小

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

圖片縮放

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

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

離屏渲染

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

正常渲染通道

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

離屏渲染

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

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

重寫(xiě)drawRect方法

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

layer.shouldRasterize = true

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

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

離屏渲染

如果沒(méi)有進(jìn)行第二步優(yōu)化，你會(huì)發(fā)現(xiàn)label也是黃色?？梢钥吹絫abbar和statusBar也是黃色，這是因?yàn)樗鼈兪褂昧四：Ч?。圖片也是黃色，這說(shuō)明它也進(jìn)行了離屏渲染，觀察源碼后發(fā)現(xiàn)主要原因是它使用了陰影，接下來(lái)我們進(jìn)行第四個(gè)優(yōu)化，在設(shè)置陰影效果的四行代碼下面添加一行：

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

這行代碼制定了陰影路徑，如果沒(méi)有手動(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ù)將圓角緩存起來(lái)：

// 設(shè)置圓角

label.layer.masksToBounds = true

label.layer.cornerRadius = 8

label.layer.shouldRasterize = true

label.layer.rasterizationScale = layer.contentsScale

快速路徑

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

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

變化區(qū)域

刷新視圖時(shí)，我們應(yīng)該把需要重繪的區(qū)域盡可能縮小。對(duì)于未發(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ì)有不少收益。不過(guò)，學(xué)而不思則罔，思而不學(xué)則殆。動(dòng)手實(shí)踐后還是應(yīng)該總結(jié)提煉，優(yōu)化滑動(dòng)性能主要涉及三個(gè)方面：

避免圖層混合

確?？丶膐paque屬性設(shè)置為true，確保backgroundColor和父視圖顏色一致且不透明

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

確保UIImage沒(méi)有alpha通道

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

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

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

慎用離屏渲染

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

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

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

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