界面優(yōu)化
圖片顯示到屏幕上是CPU與GPU的協(xié)作完成
- CPU: 計(jì)算視圖frame，圖片解碼，需要繪制紋理圖片通過(guò)數(shù)據(jù)總線交給GPU
- GPU: 紋理混合，頂點(diǎn)變換與計(jì)算,像素點(diǎn)的填充計(jì)算，渲染到幀緩沖區(qū)。
- 時(shí)鐘信號(hào)：垂直同步信號(hào)V-Sync / 水平同步信號(hào)H-Sync。
-
iOS設(shè)備雙緩沖機(jī)制：顯示系統(tǒng)通常會(huì)引入兩個(gè)幀緩沖區(qū)，雙緩沖機(jī)制
image.png
二.圖片加載的工作流程
- 假設(shè)我們使用 +imageWithContentsOfFile: 方法從磁盤(pán)中加載一張圖片，這個(gè)時(shí)候的圖片并沒(méi)有解壓縮；
- 然后將生成的 UIImage 賦值給 UIImageView
- 接著一個(gè)隱式的 CATransaction 捕獲到了 UIImageView 圖層樹(shù)的變化；
- 在主線程的下一個(gè) runloop 到來(lái)時(shí)，Core Animation 提交了這個(gè)隱式的 transaction ，這個(gè)過(guò)程可能會(huì)對(duì)圖片進(jìn)行 copy 操作，而受圖片是否字節(jié)對(duì)齊等因素的影響，這個(gè) copy 操作可能會(huì)涉及以下部分或全部步驟：
- 分配內(nèi)存緩沖區(qū)用于管理文件 IO 和解壓縮操作；
- 將文件數(shù)據(jù)從磁盤(pán)讀到內(nèi)存中；
- 將壓縮的圖片數(shù)據(jù)解碼成未壓縮的位圖形式，這是一個(gè)非常耗時(shí)的 CPU 操作；
- 最后 Core Animation 中CALayer使用未壓縮的位圖數(shù)據(jù)渲染 UIImageView 的圖層。
- CPU計(jì)算好圖片的Frame,對(duì)圖片解壓之后.就會(huì)交給GPU來(lái)做圖片渲染
- 渲染流程：
- GPU獲取獲取圖片的坐標(biāo)
- 將坐標(biāo)交給頂點(diǎn)著色器(頂點(diǎn)計(jì)算)
- 將圖片光柵化(獲取圖片對(duì)應(yīng)屏幕上的像素點(diǎn))
- 片元著色器計(jì)算(計(jì)算每個(gè)像素點(diǎn)的最終顯示的顏色值)
- 從幀緩存區(qū)中渲染到屏幕上
我們提到了圖片的解壓縮是一個(gè)非常耗時(shí)的 CPU 操作，并且它默認(rèn)是在主線程中執(zhí)行的。那么當(dāng)需要加載的圖片比較多時(shí)，就會(huì)對(duì)我們應(yīng)用的響應(yīng)性造成嚴(yán)重的影響，尤其是在快速滑動(dòng)的列表上，這個(gè)問(wèn)題會(huì)表現(xiàn)得更加突出。
卡頓監(jiān)控
FPS監(jiān)控：為了保持流程的UI交互，App的刷新拼搏應(yīng)該保持在60fps左右，其原因是因?yàn)閕OS設(shè)備默認(rèn)的刷新頻率是60次/秒，而1次刷新（即VSync信號(hào)發(fā)出）的間隔是 1000ms/60 = 16.67ms，所以如果在16.67ms內(nèi)沒(méi)有準(zhǔn)備好下一幀數(shù)據(jù)，就會(huì)產(chǎn)生卡頓
主線程卡頓監(jiān)控：通過(guò)子線程監(jiān)測(cè)主線程的RunLoop，判斷兩個(gè)狀態(tài)（kCFRunLoopBeforeSources 和 kCFRunLoopAfterWaiting）之間的耗時(shí)是否達(dá)到一定閾值
界面優(yōu)化
CPU層面的優(yōu)化
1、盡量用輕量級(jí)的對(duì)象代替重量級(jí)的對(duì)象，可以對(duì)性能有所優(yōu)化，例如 不需要相應(yīng)觸摸事件的控件，用CALayer代替UIView
2、盡量減少對(duì)UIView和CALayer的屬性修改
- CALayer內(nèi)部并沒(méi)有屬性，當(dāng)調(diào)用屬性方法時(shí)，其內(nèi)部是通過(guò)運(yùn)行時(shí)resolveInstanceMethod為對(duì)象臨時(shí)添加一個(gè)方法，并將對(duì)應(yīng)屬性值保存在內(nèi)部的一個(gè)Dictionary中，同時(shí)還會(huì)通知delegate、創(chuàng)建動(dòng)畫(huà)等，非常耗時(shí)
- UIView相關(guān)的顯示屬性，例如frame、bounds、transform等，實(shí)際上都是從CALayer映射來(lái)的，對(duì)其進(jìn)行調(diào)整時(shí)，消耗的資源比一般屬性要大
3、當(dāng)有大量對(duì)象釋放時(shí)，也是非常耗時(shí)的，盡量挪到后臺(tái)線程去釋放
4、盡量提前計(jì)算視圖布局，即預(yù)排版，例如cell的行高
5、Autolayout在簡(jiǎn)單頁(yè)面情況下們可以很好的提升開(kāi)發(fā)效率，但是對(duì)于復(fù)雜視圖而言，會(huì)產(chǎn)生嚴(yán)重的性能問(wèn)題，隨著視圖數(shù)量的增長(zhǎng)，Autolayout帶來(lái)的CPU消耗是呈指數(shù)上升的。所以盡量使用代碼布局。如果不想手動(dòng)調(diào)整frame等，也可以借助三方庫(kù)，例如Masonry（OC）、SnapKit（Swift）、ComponentKit、AsyncDisplayKit等
6、文本處理的優(yōu)化：當(dāng)一個(gè)界面有大量文本時(shí)，其行高的計(jì)算、繪制也是非常耗時(shí)的
1）如果對(duì)文本沒(méi)有特殊要求，可以使用UILabel內(nèi)部的實(shí)現(xiàn)方式，且需要放到子線程中進(jìn)行，避免阻塞主線程
計(jì)算文本寬高：[NSAttributedString boundingRectWithSize:options:context:]
文本繪制：[NSAttributedString drawWithRect:options:context:]
2）自定義文本控件，利用TextKit 或最底層的 CoreText 對(duì)文本異步繪制。并且CoreText 對(duì)象創(chuàng)建好后，能直接獲取文本的寬高等信息，避免了多次計(jì)算（調(diào)整和繪制都需要計(jì)算一次）。CoreText直接使用了CoreGraphics占用內(nèi)存小，效率高
7、圖片處理（解碼 + 繪制）
1）當(dāng)使用UIImage 或 CGImageSource 的方法創(chuàng)建圖片時(shí)，圖片的數(shù)據(jù)不會(huì)立即解碼，而是在設(shè)置時(shí)解碼（即圖片設(shè)置到UIImageView/CALayer.contents中，然后在CALayer提交至GPU渲染前，CGImage中的數(shù)據(jù)才進(jìn)行解碼）。這一步是無(wú)可避免的，且是發(fā)生在主線程中的。想要繞開(kāi)這個(gè)機(jī)制，常見(jiàn)的做法是在子線程中先將圖片繪制到CGBitmapContext，然后從Bitmap 直接創(chuàng)建圖片，例如SDWebImage三方框架中對(duì)圖片編解碼的處理。這就是Image的預(yù)解碼
當(dāng)使用CG開(kāi)頭的方法繪制圖像到畫(huà)布中，然后從畫(huà)布中創(chuàng)建圖片時(shí)，可以將圖像的繪制在子線程中進(jìn)行
8、圖片優(yōu)化
1）盡量使用PNG圖片，不使用JPGE圖片
2）通過(guò)子線程預(yù)解碼，主線程渲染，即通過(guò)Bitmap創(chuàng)建圖片，在子線程賦值image
3）優(yōu)化圖片大小，盡量避免動(dòng)態(tài)縮放
4）盡量將多張圖合為一張進(jìn)行顯示
9、盡量避免使用透明view，因?yàn)槭褂猛该鱲iew，會(huì)導(dǎo)致在GPU中計(jì)算像素時(shí)，會(huì)將透明view下層圖層的像素也計(jì)算進(jìn)來(lái)，即顏色混合處理，可以參考六、OpenGL 渲染技巧：深度測(cè)試、多邊形偏移、 混合這篇文章中提及的混合
10、按需加載，例如在TableView中滑動(dòng)時(shí)不加載圖片，使用默認(rèn)占位圖，而是在滑動(dòng)停止時(shí)加載
11、少使用addView 給cell動(dòng)態(tài)添加view
GPU層面優(yōu)化
1、盡量減少在短時(shí)間內(nèi)大量圖片的顯示，盡可能將多張圖片合為一張顯示，主要是因?yàn)楫?dāng)有大量圖片進(jìn)行顯示時(shí)，無(wú)論是CPU的計(jì)算還是GPU的渲染，都是非常耗時(shí)的，很可能出現(xiàn)掉幀的情況
2、盡量避免圖片的尺寸超過(guò)4096×4096，因?yàn)楫?dāng)圖片超過(guò)這個(gè)尺寸時(shí)，會(huì)先由CPU進(jìn)行預(yù)處理，然后再提交給GPU處理，導(dǎo)致額外CPU資源消耗
3、盡量減少視圖數(shù)量和層次，主要是因?yàn)橐晥D過(guò)多且重疊時(shí)，GPU會(huì)將其混合，混合的過(guò)程也是非常耗時(shí)的
4、盡量避免離屏渲染，可以查看這篇文章四、深入剖析【離屏渲染】原理
5、異步渲染，例如可以將cell中的所有控件、視圖合成一張圖片進(jìn)行顯示?？梢詤⒖糋raver三方框架
