UIKitパフォーマンスの最適化

WWDCカンファレンスの多くの記事やビデオがUIKitのパフォーマンスに捧げられているという事実にもかかわらず、このトピックは多くのiOS開発者にとって未理解です。 このため、主にUIアプリケーションの速度と滑らかさに依存する最も興味深い質問と問題を収集することにしました。



注意を払うべき最初の問題は、色の混合です。

翻訳の著者から

この記事では、特に元の画像とコードを使用しました。 誰もが興味深いトピックを見つけ、新しいXcodeとInstrumentsで実験を行えるようにするためです。

色混合

ブレンドは、ピクセルの最終的な色を決定するフレームレンダリング操作です。 各UIView（正直なところ、CALayer）は、たとえば、すべてのオーバーレイビューのalpha 、 backgroundColor 、 opaqueなどの一連のプロパティを組み合わせた場合、最終ピクセルの色に影響します。



UIView.alpha、UIView.opaque、UIView.backgroundColorなど、最も使用されているUIViewプロパティから始めましょう。

不透明度と透明度

UIView.opaqueはビジュアライザーのヒントです。これにより、イメージを完全に不透明な表面として表示できるため、レンダリングの品質が向上します。 Opaqueは、「 表面の下に何もペイントしないでください 」 という意味です。UIView.opaqueを使用すると、画像の下位レイヤーのレンダリングをスキップできるため、色を混ぜることはできません。

アルファ

alphaが1未満の場合、 YESであっても不透明は無視されます。

- (void)viewDidLoad { [super viewDidLoad]; UIView *view = [[UIView alloc] initWithFrame:CGRectMake(35.f, 35.f, 200.f, 200.f)]; view.backgroundColor = [UIColor purpleColor]; view.alpha = 0.5f; [self.view addSubview:view]; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

デフォルトの不透明度がYESであるにもかかわらず、アルファを1未満に設定して画像を透明にしたため、結果は色混合になります。

確認方法

注： 実際のパフォーマンスに関する正確な情報を取得するには、シミュレーターではなく、実際のデバイスでアプリケーションをテストする必要があります。 デバイスのCPUはMacデバイスのプロセッサよりも遅いため、非常に異なります。



iOSシミュレーターのデバッグメニューで、「Color Blended Layers」アイテムを見つけることができます。 デバッガーは、いくつかの半透明のレイヤーが互いに重なり合っている画像の混合レイヤーを表示できます。 ミキシングサポートが有効な状態で重ねて表示される画像の複数のレイヤーは赤で強調表示され、混合せずに表示される画像の複数のレイヤーは緑で強調表示されます。









Core Animationツールを使用するには、実際のデバイスを接続する必要があります。









「カラーブレンドレイヤー」については、こちらをご覧ください。

アルファチャンネル画像

アルファチャネルの変更がUIImageViewの透明度にどのように影響するかを理解しようとすると、同じ問題が発生します（アルファプロパティの効果も考慮してください）。 UIImageのカテゴリを使用して、カスタムアルファチャネルを持つ別の画像を取得しましょう。

 - (UIImage *)imageByApplyingAlpha:(CGFloat) alpha { UIGraphicsBeginImageContextWithOptions(self.size, NO, 0.0f); CGContextRef ctx = UIGraphicsGetCurrentContext(); CGRect area = CGRectMake(0, 0, self.size.width, self.size.height); CGContextScaleCTM(ctx, 1, -1); CGContextTranslateCTM(ctx, 0, -area.size.height); CGContextSetBlendMode(ctx, kCGBlendModeMultiply); CGContextSetAlpha(ctx, alpha); CGContextDrawImage(ctx, area, self.CGImage); UIImage *newImage = UIGraphicsGetImageFromCurrentImageContext(); UIGraphicsEndImageContext(); return newImage; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

4つのケースを検討してください。

1. UIImageViewには標準のアルファプロパティ値（1.0）があり、画像にはアルファチャネルがありません。
2. UIImageViewには標準のアルファプロパティ値（1.0）があり、画像には0.5のアルファチャネルがあります。
3. UIImageViewには変更可能なアルファプロパティ値がありますが、画像にはアルファチャネルがありません。
4. UIImageViewには変更可能なアルファプロパティ値があり、イメージのアルファチャネルは0.5です。

 - (void)viewDidLoad { [super viewDidLoad]; UIImage *image = [UIImage imageNamed:@"flower.jpg"]; UIImage *imageWithAlpha = [image imageByApplyingAlpha:0.5f]; //1st case [self.imageViewWithImageHasDefaulAlphaChannel setImage:image]; //The 2nd case [self.imageViewWihImageHaveCustomAlphaChannel setImage:imageWithAlpha]; //The 3d case self.imageViewHasChangedAlphaWithImageHasDefaultAlpha.alpha = 0.5f; [self.imageViewHasChangedAlphaWithImageHasDefaultAlpha setImage:image]; //The 4th case self.imageViewHasChangedAlphaWithImageHasCustomAlpha.alpha = 0.5f; [self.imageViewHasChangedAlphaWithImageHasCustomAlpha setImage:imageWithAlpha]; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

混合画像レイヤーはシミュレーターによって表示されます。 したがって、UIImageViewのalphaプロパティのデフォルト値が1.0で、画像のアルファチャネルが変換されている場合でも、混合レイヤーが作成されます。



Appleの公式ドキュメントは、開発者が色の混合にもっと注意を払うことを奨励しています。



「アプリケーションのパフォーマンスを大幅に改善するには、色を混ぜるときに赤の量を減らします。 カラーブレンドを使用すると、スクロールが遅くなることがよくあります。



透明なレイヤーを作成するには、追加の計算を実行する必要があります。 システムは、色を決定して描画するために、最上層と最下層を混合する必要があります。

オフスクリーン視覚化

フレームごとのレンダリングは、GPUのハードウェアアクセラレーションを使用して実行できない画像のレンダリングであり、代わりにCPUプロセッサを使用する必要があります。



低レベルでは、次のようになります。オフスクリーンレンダリングが必要なレイヤーのレンダリング中、GPUはレンダリングプロセスを停止し、CPUに制御を渡します。 次に、CPUは必要なすべての操作を実行し（たとえば、ファンタジーをDrawRectに詰め込みます）、すでに描画されたレイヤーを使用してGPUに制御を返します。 GPUがレンダリングし、描画プロセスが続行されます。



さらに、画面外の視覚化では、いわゆるバックアップストレージ用に追加のメモリを割り当てる必要があります。 同時に、ハードウェアアクセラレーションが使用されるレイヤーの描画には必要ありません。

画面の視覚化

オフスクリーン視覚化

オフスクリーンの視覚化につながる効果/設定は何ですか？ それらを見てみましょう：

カスタムDrawRect：（任意、背景を色で塗りつぶしても）

• CALayerの丸め半径
• カリヤーの影
• CALayerのマスク
• CGContextを使用するカスタム描画

Color Offscreen-Rendered Yellowオプションを有効にすると、InstrumentsのCore Animationツールを使用してオフスクリーンビジュアライゼーションを簡単に検出できます。 オフスクリーンレンダリングが発生する場所は、黄色のレイヤーで示されます。







いくつかのケースを検討し、作業の品質をテストします。 仕事の質を向上させると同時に、優れたデザインのビジョンを実現する最適なソリューションを見つけようとします。

テスト環境：

• デバイス：iOS 7.1.1を搭載したiPhone 4（11D201）
• Xcode：5.1.1（5B1008）
• MacBook Pro 15 Retina（ME294）とOS X 10.9.3（13D65）

角を丸くする

カスタムセルを使用して簡単なTableviewを作成し、UIImageViewとUILabelをセルに追加します。 ボタンが丸い古き良き時代を覚えていますか？ Tableviewでこの素晴らしい効果を実現するには、CALayer.cornerRadiusおよびCALayer.masksToBoundsにYES値を設定する必要があります。

 - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath { NSString *identifier = NSStringFromClass(CRTTableViewCell.class); CRTTableViewCell *cell = [self.tableView dequeueReusableCellWithIdentifier:identifier]; cell.imageView.layer.cornerRadius = 30; cell.imageView.layer.masksToBounds = YES; cell.imageView.image = [UIImage imageNamed:@"flower.jpg"]; cell.textLabel.text = [NSString stringWithFormat:@"Cell:%ld",(long)indexPath.row]; return cell; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

目的の効果を達成したという事実にもかかわらず、インストルメントがなくても、パフォーマンスが推奨される60 FPSから非常に離れていることは明らかです。 しかし、未検証の数値的な答えを見つけるために水晶玉を調べません。 代わりに、 Instrumentsでパフォーマンスをテストするだけです。



まず、オフスクリーンレンダリングされた黄色のカラーオプションを有効にします。 各UIImageViewセルは黄色のレイヤーで覆われています。









また、InstrumentsでアニメーションとOpenGL ESドライバーを使用する方法を確認する価値があります。



OpenGL ES Driverツールといえば、これは何をもたらしますか？ 仕組みを理解するために、GPUを内側から見てみましょう。 GPUは、レンダラーとタイラーの2つのコンポーネントで構成されています。 レンダラーの役割はデータを描画することですが、順序と構成はTilerコンポーネントによって決定されます。 したがって、Tilerの仕事は、フレームをピクセルに分割し、それらの可視性を決定することです。 その場合にのみ、可視ピクセルがレンダラーに渡されます（つまり、レンダリングプロセスの速度が低下します ）。



レンダラー使用率の値が〜50％を超える場合、これはアニメーション処理が充填速度によって制限される可能性があることを意味します。 Tiler Utilizationが50％を超える場合、これはアニメーションが幾何学的に制限される可能性があることを示しています。つまり、画面上では、レイヤーが多すぎます。















目的の効果を達成すると同時に、生産性を向上させるために、別のアプローチを探す必要があることは明らかです。 UIImageのカテゴリを使用して、cornerRadiusプロパティを使用せずに角を丸くします。

 @implementation UIImage (YALExtension) - (UIImage *)yal_imageWithRoundedCornersAndSize:(CGSize)sizeToFit { CGRect rect = (CGRect){0.f, 0.f, sizeToFit}; UIGraphicsBeginImageContextWithOptions(sizeToFit, NO, UIScreen.mainScreen.scale); CGContextAddPath(UIGraphicsGetCurrentContext(), [UIBezierPath bezierPathWithRoundedRect:rect cornerRadius:sizeToFit.width].CGPath); CGContextClip(UIGraphicsGetCurrentContext()); [self drawInRect:rect]; UIImage *output = UIGraphicsGetImageFromCurrentImageContext(); UIGraphicsEndImageContext(); return output; } @end
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

そして、cellForRowAtIndexPathメソッドのdataSourceの実装を変更します。

 - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath { NSString *identifier = NSStringFromClass(CRTTableViewCell.class); CRTTableViewCell *cell = [self.tableView dequeueReusableCellWithIdentifier:identifier]; cell.myTextLabel.text = [NSString stringWithFormat:@"Cell:%ld",(long)indexPath.row]; UIImage *image = [UIImage imageNamed:@"flower.jpg"]; cell.imageViewForPhoto.image = [image yal_imageWithRoundedCornersAndSize:cell.imageViewForPhoto.bounds.size]; return cell; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

レンダリングコードは、オブジェクトが最初に画面に表示されるときに1回だけ呼び出されます。 オブジェクトはCALayerによってキャッシュされ、その後、追加のレンダリングなしで表示されます。 Core Animationのメソッドよりも動作が遅いという事実に関係なく、このアプローチにより、フレームごとのレンダリングを一度に変換できます。



パフォーマンスの測定に戻る前に、オフスクリーンレンダリングをもう一度確認しましょう。





















57-60 FPS！ 生産性を2倍にし、Tiler UtilizationとRenderer Utilizationを削減する最適な方法で成功しました。

drawRectメソッドのオーバーライドの乱用を避ける

-drawRectメソッドは、背景を色で塗りつぶすだけでよい場合でも、オフスクリーンレンダリングにつながることに注意してください。



特に、UIView BackgroundColorプロパティを使用する代わりに、背景色の設定などの単純な操作のためにDrawRectメソッドの独自の実装を作成する場合。



このアプローチは2つの理由で非合理的です。



まず、システム全体のUIViewは独自のレンダリングメソッドを実装してコンテンツを表示できます。Appleがこれらのプロセスを最適化しようとしていることは明らかです。 さらに、バックアップストレージを覚えておく必要があります。新しいバックアップイメージは、ピクセルサイズがイメージのサイズにcontentScaleを掛けたものに等しく、次のイメージ更新までキャッシュされます。



第二に、DrawRectメソッドの悪用を回避する場合、新しいレンダリングサイクルを実行するたびにバックアップストレージに追加のメモリを割り当ててリセットする必要はありません。

CALayer.shouldRasterize

オフスクリーンレンダリングのパフォーマンスを向上させる別の方法は、CALayer.shouldRasterizeプロパティを使用することです。 レイヤーは、このレイヤーを再度描画する必要がある瞬間まで、一度レンダリングされてキャッシュされます。



ただし、パフォーマンスが向上する可能性がありますが、レイヤーを頻繁に再描画する必要がある場合は、システムが描画のたびにレイヤーをラスタライズするため、追加のキャッシュコストが無駄になります。

最終的に、CALayer.shouldRasterizeの使用は、特定のユースケースとインストゥルメントに依存します。

影とshadowPath

影の助けを借りて、ユーザーインターフェイスをより美しくすることができます。 iOSでは、シャドウ効果を簡単に追加できます。

 cell.imageView.layer.shadowRadius = 30; cell.imageView.layer.shadowOpacity = 0.5f;
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

「オフスクリーンレンダリング」をオンにすると、シャドウがオフスクリーンレンダリングを追加することがわかります。これがCoreAnimationがリアルタイムでシャドウレンダリングを計算し、 FPSを削減する理由です。

Appleは何と言っていますか？

»Core Animationが影の形状を決定できるようにすると、アプリケーションのパフォーマンスに影響する可能性があります。 代わりに、CALayerのshadowPathプロパティを使用して影の形状を定義します。 shadowPathを使用する場合、Core Animationは指定されたフォームを使用してシャドウ効果をレンダリングおよびキャッシュします。 状態が変わらないか、めったに変わらないレイヤーの場合、これにより、Core Animationによって実行される視覚化の数が減り、パフォーマンスが大幅に向上します。



したがって、CoreAnimationにシャドウキャッシング（CGPath）を提供する必要があります。これは非常に簡単です。

 UIBezierPath *shadowPath = [UIBezierPath bezierPathWithRect:cell.imageView.bounds]; [cell.imageView.layer setShadowPath:shadowPath.CGPath];
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

1行のコードで、オフスクリーンレンダリングを回避し、パフォーマンスを大幅に改善しました。



ご覧のとおり、多くのUIパフォーマンスの問題は非常に簡単に解決できます。 1つの小さなコメント-最適化の前後にパフォーマンスを測定することを忘れないでください:)

便利なリンクとリソース

WWDC 2011ビデオ：UIKitレンダリングについて

WWDC 2012ビデオ：iOSアプリのパフォーマンス：グラフィックスとアニメーション

本： iOS Coreアニメーション。 ニック・ロックウッドによる高度なテクニック

iOS画像キャッシュ。 図書館のベンチマーク

WWDC 2014ビデオ：iOSアプリ向けの高度なグラフィックスとアニメーション