iOS離屏渲染之優化分析

在進行iOS的應用開發過程中，有時候會出現卡頓的問題，雖然iOS裝置的效能越來越高，但是卡頓的問題還是有可能會出現，而離屏渲染是造成卡頓的原因之一。因此，本文主要分析一下離屏渲染產生的原因及避免的方法，最後介紹一下Xcode自帶的分析離屏渲染的工具Instruments的使用。

UIView和CALayer關係

UIView繼承自UIResponder，可以處理系統傳遞過來的事件，如：UIApplication、UIViewController、UIView，以及所有從UIView派生出來的UIKit類。每個UIView內部都有一個CALayer提供內容的繪製和顯示，並且作為內部RootLayer

CALayer繼承自NSObject類，負責顯示UIView提供的內容contents。CALayer有三個視覺元素：背景色、內容和邊框，其中，內容的本質是一個CGImage。

下圖為CALayer的結構圖：

介面渲染過程

RunLoop有一個60fps的回撥，即每16.7ms繪製一次螢幕，所以view的繪製必須在這個時間內完成，view內容的繪製是CPU的工作，然後把繪製的內容交給GPU渲染，包括多個View的拼接（Compositing）、紋理的渲染(Texture)等等，最後顯示在螢幕上。但是，如果無法是16.7ms內完成繪製，就會出現丟幀的問題，一般情況下，如果幀率保證在30fps

渲染的過程如下：

• UIView的layer層有一個content，指向一塊快取，即backing store
• UIView繪製時，會呼叫drawRect方法，通過context將資料寫入backing store
• 在backing store寫完後，通過render server交給GPU去渲染，將backing store中的bitmap資料顯示在螢幕上

離屏渲染

在使用圓角、陰影和遮罩等檢視功能的時候，圖層屬性的混合體被指定為在未預合成之前不能直接在螢幕中繪製，所有就需要在螢幕外的上下文中渲染，即離屏渲染。

離屏渲染卡頓原因

離屏渲染之所以會特別消耗效能，是因為要建立一個螢幕外的緩衝區，然後從當屏緩衝區切換到螢幕外的緩衝區，然後再完成渲染；其中，建立緩衝區和切換上下文最消耗效能，而繪製其實不是效能損耗的主要原因。

設定了以下屬性時，就會觸發離屏繪製：

• shouldRasterize（光柵化）
• masks（遮罩）
• shadows（陰影）
• edge antialiasing（抗鋸齒）
• group opacity（不透明）
• 複雜形狀設定圓角等
• 漸變

螢幕渲染型別

CPU計算好顯示內容提交到GPU，GPU渲染完成後將渲染結果放入幀緩衝區，隨後視訊控制器會按照 VSync訊號逐行讀取幀緩衝區的資料，經過可能的數模轉換傳遞給顯示器顯示。

螢幕渲染有如下三種：

GPU中的螢幕渲染：

1、On-Screen Rendering

意為當前螢幕渲染，指的是GPU的渲染操作是在當前用於顯示的螢幕緩衝區中進行

2、Off-Screen Rendering

意為離屏渲染，指的是GPU在當前螢幕緩衝區以外新開闢一個緩衝區進行渲染操作

3、CPU中的離屏渲染（特殊離屏渲染，即不在GPU中的渲染）

如果我們重寫了drawRect方法，並且使用任何Core Graphics的技術進行了繪製操作，就涉及到了CPU渲染

CoreGraphic通常是執行緒安全的，所以可以進行非同步繪製，顯示的時候再放回主執行緒

切圓角優化

切圓角是開發app過程中經常會用到的功能，但是使用不同的方式，效能損耗也會不同，下面會介紹3種切圓角的方法；其中，方法三的效能相對最好。

方法一

使用cornerRadius進行切圓角，在iOS9之前會產生離屏渲染，比較消耗效能，而之後系統做了優化，則不會產生離屏渲染，但是操作最簡單

iv.layer.cornerRadius = 30;
iv.layer.masksToBounds = YES;

方法二

利用mask設定圓角，利用的是UIBezierPath和CAShapeLayer來完成

CAShapeLayer *mask1 = [[CAShapeLayer alloc] init];
mask1.opacity = 0.5;
mask1.path = [UIBezierPath bezierPathWithOvalInRect:iv.bounds].CGPath;
iv.layer.mask = mask1;

方法三

利用CoreGraphics畫一個圓形上下文，然後把圖片繪製上去，得到一個圓形的圖片，達到切圓角的目的。

- (UIImage *)drawCircleImage:(UIImage*)image
{
    CGFloat side = MIN(image.size.width, image.size.height);
    
    UIGraphicsBeginImageContextWithOptions(CGSizeMake(side, side), false, [UIScreen mainScreen].scale);
    CGContextAddPath(UIGraphicsGetCurrentContext(), [UIBezierPath bezierPathWithOvalInRect:CGRectMake(0, 0, side, side)].CGPath);
    CGContextClip(UIGraphicsGetCurrentContext());
    
    CGFloat marginX = -(image.size.width - side) * 0.5;
    CGFloat marginY = -(image.size.height - side) * 0.5;
    [image drawInRect:CGRectMake(marginX, marginY, image.size.width, image.size.height)];
    
    CGContextDrawPath(UIGraphicsGetCurrentContext(), kCGPathFillStroke);
    
    UIImage *newImage = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();
    
    return newImage;
}

Instruments使用

iOS的效能除錯有許多方法，而官方提供的Instruments是一個強大的效能除錯工具，可以分析如下功能：記憶體、核心動畫、自動化、佈局、網路等等，本文主要介紹一下利用Core Animation來分析應用的效能問題。

下面介紹一下Core Animation中的Debug屬性的部分功能，這些功能在分析離屏渲染等效能問題時十分有用：

Color Blended Layers

這個選項基於渲染程度對螢幕中的混合區域進行綠到紅的高亮（也就是多個半透明圖層的疊加）。由於重繪的原因，混合對GPU效能會有影響，同時也是滑動或者動畫幀率下降的罪魁禍首之一

Color Hits Green and Misses Red

當設定shouldRasterizep屬性為YES的時候，耗時的圖層繪製會被快取，然後當做一個簡單的扁平圖片呈現。當快取再生的時候這個選項就用紅色對柵格化圖層進行了高亮。如果快取頻繁再生的話，就意味著柵格化可能會有負面的效能影響了

Color Offscreen-Rendered Yellow

開啟後會把那些需要離屏渲染的圖層高亮成黃色，這就意味著黃色圖層可能存在效能問題

當然Debug還有其它的選項，來分析不同的效能問題，如有需求，請參考其它資料。

iOS離屏渲染的效能分析到此結束，文中如有不足之處，歡迎指出，共同進步。(文中部分圖片來自網際網路，版權歸原作者所有)