屏幕顯示圖像的原理

　　首先從過去的 CRT 顯示器原理說起。CRT 的電子槍按照上面方式，從上到下一行行掃描，掃描完成后顯示器就呈現一幀畫面，隨后電子槍回到初始位置繼續下一次掃描。為了把顯示器的顯示過程和系統的視頻控制器進行同步，顯示器（或者其他硬件）會用硬件時鐘產生一系列的定時信號。當電子槍換到新的一行，準備進行掃描時，顯示器會發出一個水平同步信號（horizonal synchronization），簡稱 HSync；而當一幀畫面繪制完成后，電子槍回復到原位，準備畫下一幀前，顯示器會發出一個垂直同步信號（vertical synchronization），簡稱 VSync。顯示器通常以固定頻率進行刷新，這個刷新率就是 VSync 信號產生的頻率。盡管現在的設備大都是液晶顯示屏了，但原理仍然沒有變。

　　通常來說，計算機系統中 CPU、GPU、顯示器是以上面這種方式協同工作的。CPU 計算好顯示內容提交到 GPU，GPU 渲染完成后將渲染結果放入幀緩沖區，隨后視頻控制器會按照 VSync 信號逐行讀取幀緩沖區的數據，經過可能的數模轉換傳遞給顯示器顯示。

　　在最簡單的情況下，幀緩沖區只有一個，這時幀緩沖區的讀取和刷新都都會有比較大的效率問題。為了解決效率問題，顯示系統通常會引入兩個緩沖區，即雙緩沖機制。在這種情況下，GPU 會預先渲染好一幀放入一個緩沖區內，讓視頻控制器讀取，當下一幀渲染好后，GPU 會直接把視頻控制器的指針指向第二個緩沖器。如此一來效率會有很大的提升。

　　雙緩沖雖然能解決效率問題，但會引入一個新的問題。當視頻控制器還未讀取完成時，即屏幕內容剛顯示一半時，GPU 將新的一幀內容提交到幀緩沖區并把兩個緩沖區進行交換后，視頻控制器就會把新的一幀數據的下半段顯示到屏幕上，造成畫面撕裂現象，如下圖：

　　為了解決這個問題，GPU 通常有一個機制叫做垂直同步（簡寫也是 V-Sync），當開啟垂直同步后，GPU 會等待顯示器的 VSync 信號發出后，才進行新的一幀渲染和緩沖區更新。這樣能解決畫面撕裂現象，也增加了畫面流暢度，但需要消費更多的計算資源，也會帶來部分延遲。

　　那么目前主流的移動設備是什么情況呢？從網上查到的資料可以知道，iOS 設備會始終使用雙緩存，并開啟垂直同步。而安卓設備直到 4.1 版本，Google 才開始引入這種機制，目前安卓系統是三緩存+垂直同步。

　　卡頓產生的原因和解決方案

　　在 VSync 信號到來后，系統圖形服務會通過 CADisplayLink 等機制通知 App，App 主線程開始在 CPU 中計算顯示內容，比如視圖的創建、布局計算、圖片解碼、文本繪制等。隨后 CPU 會將計算好的內容提交到 GPU 去，由 GPU 進行變換、合成、渲染。隨后 GPU 會把渲染結果提交到幀緩沖區去，等待下一次 VSync 信號到來時顯示到屏幕上。由于垂直同步的機制，如果在一個 VSync 時間內，CPU 或者 GPU 沒有完成內容提交，則那一幀就會被丟棄，等待下一次機會再顯示，而這時顯示屏會保留之前的內容不變。這就是界面卡頓的原因。

　　從上面的圖中可以看到，CPU 和 GPU 不論哪個阻礙了顯示流程，都會造成掉幀現象。所以開發時，也需要分別對 CPU 和 GPU 壓力進行評估和優化。

　　CPU 資源消耗原因和解決方案

　　對象創建

　　對象的創建會分配內存、調整屬性、甚至還有讀取文件等操作，比較消耗 CPU 資源。盡量用輕量的對象代替重量的對象，可以對性能有所優化。比如 CALayer 比 UIView 要輕量許多，那么不需要響應觸摸事件的控件，用 CALayer 顯示會更加合適。如果對象不涉及 UI 操作，則盡量放到后臺線程去創建，但可惜的是包含有 CALayer 的控件，都只能在主線程創建和操作。通過 Storyboard 創建視圖對象時，其資源消耗會比直接通過代碼創建對象要大非常多，在性能敏感的界面里，Storyboard 并不是一個好的技術選擇。

　　盡量推遲對象創建的時間，并把對象的創建分散到多個任務中去。盡管這實現起來比較麻煩，并且帶來的優勢并不多，但如果有能力做，還是要盡量嘗試一下。如果對象可以復用，并且復用的代價比釋放、創建新對象要小，那么這類對象應當盡量放到一個緩存池里復用。

　　對象調整

　　對象的調整也經常是消耗 CPU 資源的地方。這里特別說一下 CALayer：CALayer 內部并沒有屬性，當調用屬性方法時，它內部是通過運行時 resolveInstanceMethod 為對象臨時添加一個方法，并把對應屬性值保存到內部的一個 Dictionary 里，同時還會通知 delegate、創建動畫等等，非常消耗資源。UIView 的關于顯示相關的屬性（比如 frame/bounds/transform）等實際上都是 CALayer 屬性映射來的，所以對 UIView 的這些屬性進行調整時，消耗的資源要遠大于一般的屬性。對此你在應用中，應該盡量減少不必要的屬性修改。

　　當視圖層次調整時，UIView、CALayer 之間會出現很多方法調用與通知，所以在優化性能時，應該盡量避免調整視圖層次、添加和移除視圖。

　　對象銷毀

　　對象的銷毀雖然消耗資源不多，但累積起來也是不容忽視的。通常當容器類持有大量對象時，其銷毀時的資源消耗就非常明顯。同樣的，如果對象可以放到后臺線程去釋放，那就挪到后臺線程去。這里有個小 Tip：把對象捕獲到 block 中，然后扔到后臺隊列去隨便發送個消息以避免編譯器警告，就可以讓對象在后臺線程銷毀了。

　　NSArray *tmp = self.array;

　　self.array = nil;

　　dispatch_async（queue， ^{

　　［tmp class］;

　　}）;

　　布局計算

　　視圖布局的計算是 App 中最為常見的消耗 CPU 資源的地方。如果能在后臺線程提前計算好視圖布局、并且對視圖布局進行緩存，那么這個地方基本就不會產生性能問題了。

　　不論通過何種技術對視圖進行布局，其最終都會落到對 UIView.frame/bounds/center 等屬性的調整上。上面也說過，對這些屬性的調整非常消耗資源，所以盡量提前計算好布局，在需要時一次性調整好對應屬性，而不要多次、頻繁的計算和調整這些屬性。

　　Autolayout

　　Autolayout 是蘋果本身提倡的技術，在大部分情況下也能很好的提升開發效率，但是 Autolayout 對于復雜視圖來說常常會產生嚴重的性能問題。隨著視圖數量的增長，Autolayout 帶來的 CPU 消耗會呈指數級上升。具體數據可以看這個文章：http://pilky.me/36/。 如果你不想手動調整 frame 等屬性，你可以用一些工具方法替代（比如常見的 left/right/top/bottom/width/height 快捷屬性），或者使用 ComponentKit、AsyncDisplayKit 等框架。

　　文本計算

　　如果一個界面中包含大量文本（比如微博微信朋友圈等），文本的寬高計算會占用很大一部分資源，并且不可避免。如果你對文本顯示沒有特殊要求，可以參考下 UILabel 內部的實現方式：用 ［NSAttributedString boundingRectWithSize:options:context：］ 來計算文本寬高，用 -［NSAttributedString drawWithRect:options:context：］ 來繪制文本。盡管這兩個方法性能不錯，但仍舊需要放到后臺線程進行以避免阻塞主線程。

　　如果你用 CoreText 繪制文本，那就可以先生成 CoreText 排版對象，然后自己計算了，并且 CoreText 對象還能保留以供稍后繪制使用。

　　文本渲染

　　屏幕上能看到的所有文本內容控件，包括 UIWebView，在底層都是通過 CoreText 排版、繪制為 Bitmap 顯示的。常見的文本控件 （UILabel、UITextView 等），其排版和繪制都是在主線程進行的，當顯示大量文本時，CPU 的壓力會非常大。對此解決方案只有一個，那就是自定義文本控件，用 TextKit 或最底層的 CoreText 對文本異步繪制。盡管這實現起來非常麻煩，但其帶來的優勢也非常大，CoreText 對象創建好后，能直接獲取文本的寬高等信息，避免了多次計算（調整 UILabel 大小時算一遍、UILabel 繪制時內部再算一遍）；CoreText 對象占用內存較少，可以緩存下來以備稍后多次渲染。

　　圖片的解碼

　　當你用 UIImage 或 CGImageSource 的那幾個方法創建圖片時，圖片數據并不會立刻解碼。圖片設置到 UIImageView 或者 CALayer.contents 中去，并且 CALayer 被提交到 GPU 前，CGImage 中的數據才會得到解碼。這一步是發生在主線程的，并且不可避免。如果想要繞開這個機制，常見的做法是在后臺線程先把圖片繪制到 CGBitmapContext 中，然后從 Bitmap 直接創建圖片。目前常見的網絡圖片庫都自帶這個功能。

　　圖像的繪制

　　圖像的繪制通常是指用那些以 CG 開頭的方法把圖像繪制到畫布中，然后從畫布創建圖片并顯示這樣一個過程。這個最常見的地方就是 ［UIView drawRect：］ 里面了。由于 CoreGraphic 方法通常都是線程安全的，所以圖像的繪制可以很容易的放到后臺線程進行。一個簡單異步繪制的過程大致如下（實際情況會比這個復雜得多，但原理基本一致）：

　　- （void）display {

　　dispatch_async（backgroundQueue， ^{

　　CGContextRef ctx = CGBitmapContextCreate（。。.）;

　　// draw in context.。。

　　CGImageRef img = CGBitmapContextCreateImage（ctx）;

　　CFRelease（ctx）;

　　dispatch_async（mainQueue， ^{

　　layer.contents = img;

　　}）;

　　}）;

　　}

　　GPU 資源消耗原因和解決方案

　　相對于 CPU 來說，GPU 能干的事情比較單一：接收提交的紋理（Texture）和頂點描述（三角形），應用變換（transform）、混合并渲染，然后輸出到屏幕上。通常你所能看到的內容，主要也就是紋理（圖片）和形狀（三角模擬的矢量圖形）兩類。

相關電子資料下載

• iOS17.1可能明天發布，iOS17.1主要修復哪些問題？ 380
• 華為全新鴻蒙蓄勢待發 僅支持鴻蒙內核和鴻蒙系統應用 719
• 蘋果手機系統iOS 17遭用戶質疑 731
• iPhone12輻射超標？蘋果推送iOS 17.1解決此事 750
• 傳華為囤積零部件 目標明年智能手機出貨7000萬部；消息稱 MiOS 僅限國內，小米 28208
• 蘋果推送iOS17.0.3，解決iPhone15Pro系列存在機身過熱 216
• Testin云測兼容和真機服務平臺中上線iPhone 15系列手機 208
• 利爾達推出搭載HooRiiOS的Matter模組 145
• 運放參數解析：輸入偏置電流(Ibias)和失調電流(Ios) 128
• 昆侖太科發布支持國產飛騰騰銳D2000芯片的開源BIOS固件版本 448