一、背景

iOS所提供的UIKit框架，其工作基本是在主線程上進行，界面繪制、用戶輸入響應(yīng)交互等等。當(dāng)大量且頻繁的繪制任務(wù)，以及各種業(yè)務(wù)邏輯同時放在主線程上完成時，便有可能造成界面卡頓，丟幀現(xiàn)象，即在16.7ms內(nèi)未能完成1幀的繪制，幀率低于60fps黃金標(biāo)準(zhǔn)。目前常用的UITableView或UICollectionView，在大量復(fù)雜文本及圖片內(nèi)容填充后，如果沒有優(yōu)化處理，快速滑動的情況下易出現(xiàn)卡頓，流暢性差問題。

二、原理和思路

• UIView 中有一個 CALayer 的屬性，負責(zé) UIView 具體內(nèi)容的顯示。
• 具體過程是系統(tǒng)會把 UIView 顯示的內(nèi)容（包括 UILabel 的文字，UIImageView 的圖片等）繪制在一張畫布上，完成后倒出圖片賦值給 CALayer 的 contents 屬性，完成顯示。
  這其中的工作都是在主線程中完成的，這就導(dǎo)致了主線程頻繁的處理 UI 繪制的工作，如果要繪制的元素過多，過于頻繁，就會造成卡頓。

解決方案使用異步繪制就是：

• 把 UIView 顯示的內(nèi)容（包括 UILabel 的文字，UIImageView 的圖片等）繪制生成的 bitmap 在子線程完成。
• 然后在回到主線程把 bitmap 賦值給 view.layer.content 屬性。

目前比較好的異步繪制框架，比如YYTextAsyncLayer

三、具體實現(xiàn)

那么是否可以將復(fù)雜的繪制過程放到后臺線程中執(zhí)行，從而減輕主線程負擔(dān)，來提升 UI 流暢度呢？

可以的，系統(tǒng)給我們留下的異步繪制的口子，請看下面的流程圖，它是我們進行基本繪制的基礎(chǔ):

image.png

1. 首先 UIView 調(diào)用 setNeedsDisplay 方法
2. 其次是調(diào)用其 layer 屬性的同名方法（view.layer setNeedsDisplay）
3. 這時 layer 并不會立刻調(diào)用 display 方法,而是要等到當(dāng)前 runloop 即將結(jié)束的時候調(diào)用 display，進入到繪制流程。
4. 在 UIView 中 layer.delegate 就是 UIView 本身，UIView 并沒有實現(xiàn) displayLayer: 方法，所以進入系統(tǒng)的繪制流程，我們可以通過實現(xiàn) displayLayer: 方法來進行異步繪制。

所以去實現(xiàn) displayLayer 方式，實現(xiàn)開啟異步繪制入口

在“異步繪制入口”去開辟子線程，然后在子線程中實現(xiàn)和系統(tǒng)類似的繪制流程。

系統(tǒng)繪制流程

image.png

1. 首先 CALayer 會在內(nèi)部創(chuàng)建 一個上下文環(huán)境 (CGContextRef)
2. 然后判斷 layer 是否有代理：
   • 沒有代理的話，就調(diào)用 layer 的 drawInContext: 方法
   • 有代理的話，調(diào)用 delegate 的 drawLayer : inContext方法，這個方法實現(xiàn)是系統(tǒng)完成。
   • 然后在合適的時機回調(diào)代理，調(diào)用 drawRect 默認操作是什么都不做（而之所以有這個接口,就是為了讓我們在系統(tǒng)繪制之后,還可以做些自定義的繪制工作）。
3. 最后無論是哪個分支都把 backing store (上下文環(huán)境) 的 bitmap 位圖提交到 GPU，
4. 也就是將生成的 bitmap 位圖賦值給 layer.content 屬性。

好了，下面是重點，如何實現(xiàn)異步繪制的過程

下面看一下異步繪制的時序圖能更好的理解異步繪制流程：

image.png

1. 首先在主線程調(diào)用 setNeedsdispay 方法
2. 系統(tǒng)會在 runloop 將要結(jié)束的時候調(diào)用 [CAlayer display] 方法
3. 如果我們的代理實現(xiàn)了dispayLayer 這個方法，會調(diào)用 dispayLayer 這個方法。我們可以去子線程里面進行異步繪制。子線程主要做的工作：

• 創(chuàng)建上下文
• UI控件的繪制工作
• 生成對應(yīng)的圖片（bitmap）

4.主線程可以做其他工作

5. 異步繪制完事之后，回到主線程，把繪制的 bitmap 賦值 view.layer.contents 屬性中

面試考點

我們調(diào)用 [UIView setNeedsDisplay] 方法的時候，不會立馬發(fā)送對應(yīng)視圖的繪制工作，為什么？

調(diào)用 [UIView setNeedsDisplay] 后，
然后會調(diào)用系統(tǒng)的同名方法 [view.layer setNeedsDisplay] 方法并在當(dāng)前 view 上面打上一個臟標(biāo)記
當(dāng)前 Runloop 將要結(jié)束的時候才會調(diào)用 [CALyer display] 方法，然后進入到視圖真正的繪制工作當(dāng)中。

是否知道異步繪制？如何進行異步繪制？

基于系統(tǒng)開的口子 [layer.delegate dispayLayer:] 方法。

并且實現(xiàn)/遵從了 dispayLayer 這個方法，我們就可以進行異步繪制：
1）代理負責(zé)生產(chǎn)對應(yīng)的 bitmap
2）設(shè)置 bitmap 作為 layer.contents 屬性的值

代碼：

#import <UIKit/UIKit.h>

NS_ASSUME_NONNULL_BEGIN

@interface AsyncDrawLabel : UIView

@property (nonatomic, copy) NSString *text;
@property (nonatomic, strong) UIFont *font;

@end

NS_ASSUME_NONNULL_END


#import "AsyncDrawLabel.h"
#import <CoreText/CoreText.h>

@implementation AsyncDrawLabel

- (void)setText:(NSString *)text {
    _text = text;
}

- (void)setFont:(UIFont *)font {
    _font = font;
}


// 除了在drawRect方法中, 其他地方獲取context需要自己創(chuàng)建[http://www.itdecent.cn/p/86f025f06d62] coreText用法簡介:[https://www.cnblogs.com/purple-sweet-pottoes/p/5109413.html]
 
- (void)displayLayer:(CALayer *)layer {
    CGSize size = self.bounds.size;
    CGFloat scale = [UIScreen mainScreen].scale;
    // 異步繪制，切換至子線程
    dispatch_async(dispatch_get_global_queue(0, 0), ^{
        UIGraphicsBeginImageContextWithOptions(size, NO, scale);
        // 獲取當(dāng)前上下文
        CGContextRef context = UIGraphicsGetCurrentContext();
        [self draw:context size:size];
        UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
        UIGraphicsEndImageContext();
        // 子線程完成工作，切換至主線程顯示
        dispatch_async(dispatch_get_main_queue(), ^{
            self.layer.contents = (__bridge id)image.CGImage;
        });
    });
}

- (void)draw:(CGContextRef)context size:(CGSize)size {
    // 將坐標(biāo)系上下翻轉(zhuǎn)，因為底層坐標(biāo)系和 UIKit 坐標(biāo)系原點位置不同。
    CGContextSetTextMatrix(context, CGAffineTransformIdentity);
    // 文本沿著Y軸移動
    CGContextTranslateCTM(context, 0, size.height); // 原點為左下角
    // 文本反轉(zhuǎn)成context坐標(biāo)系
    CGContextScaleCTM(context, 1, -1);
    // 創(chuàng)建繪制區(qū)域
    CGMutablePathRef path = CGPathCreateMutable();
    CGPathAddRect(path, NULL, CGRectMake(0, 0, size.width, size.height));
    // 創(chuàng)建需要繪制的文字
    NSMutableAttributedString *attrStr = [[NSMutableAttributedString alloc]initWithString:self.text];
    [attrStr addAttribute:NSFontAttributeName value:self.font range:NSMakeRange(0, self.text.length)];
    // 根據(jù)attStr生成CTFramesetterRef
    CTFramesetterRef framesetter = CTFramesetterCreateWithAttributedString((CFAttributedStringRef)attrStr);
    CTFrameRef frame = CTFramesetterCreateFrame(framesetter, CFRangeMake(0, attrStr.length), path, NULL);
    // 將frame的內(nèi)容繪制到content中
    CTFrameDraw(frame, context);
}

一次runloop回調(diào)，經(jīng)常會執(zhí)行多個繪制任務(wù)，這里考慮開辟多個線程去異步執(zhí)行。首選并行隊列可以滿足，但為了滿足性能效率的同時確保不過多的占用資源和避免線程間競爭等待，更好的方案應(yīng)該是開辟多個串行隊列單線程處理并發(fā)任務(wù)。
接下來的問題是，異步繪制創(chuàng)建幾個串行隊列合適？最大并發(fā)數(shù)參考SDWebImage圖片下載并發(fā)數(shù)的限制數(shù)：6。