iOS離屏渲染之優化分析

本文轉載自查看原文 2017-09-22 17:53 8280 離屏渲染、性能優化

在進行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以上，界面卡頓效果不明顯，那么就需要在33.4ms內完成View的繪制，而低於這個幀率，就會產生卡頓的效果，影響體驗。

渲染的過程如下：

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;
}