一、背景
iOS所提供的UIKit框架待讳，其工作基本是在主線程上進(jìn)行芒澜，界面繪制仰剿、用戶輸入響應(yīng)交互等等。當(dāng)大量且頻繁的繪制任務(wù)痴晦，以及各種業(yè)務(wù)邏輯同時(shí)放在主線程上完成時(shí)南吮，便有可能造成界面卡頓，丟幀現(xiàn)象阅酪，即在16.7ms內(nèi)未能完成1幀的繪制旨袒，幀率低于60fps黃金標(biāo)準(zhǔn)。目前常用的UITableView或UICollectionView术辐，在大量復(fù)雜文本及圖片內(nèi)容填充后砚尽，如果沒(méi)有優(yōu)化處理，快速滑動(dòng)的情況下易出現(xiàn)卡頓辉词，流暢性差問(wèn)題必孤。
二、原理和思路
- UIView 中有一個(gè) CALayer 的屬性瑞躺，負(fù)責(zé) UIView 具體內(nèi)容的顯示敷搪。
- 具體過(guò)程是系統(tǒng)會(huì)把 UIView 顯示的內(nèi)容（包括 UILabel 的文字，UIImageView 的圖片等）繪制在一張畫(huà)布上幢哨，完成后倒出圖片賦值給 CALayer 的 contents 屬性赡勘，完成顯示。
這其中的工作都是在主線程中完成的捞镰，這就導(dǎo)致了主線程頻繁的處理 UI 繪制的工作闸与，如果要繪制的元素過(guò)多，過(guò)于頻繁岸售，就會(huì)造成卡頓践樱。
解決方案使用異步繪制就是：
- 把 UIView 顯示的內(nèi)容（包括 UILabel 的文字，UIImageView 的圖片等）繪制生成的 bitmap 在子線程完成凸丸。
- 然后在回到主線程把 bitmap 賦值給 view.layer.content 屬性拷邢。
目前比較好的異步繪制框架，比如YYTextAsyncLayer
三屎慢、具體實(shí)現(xiàn)
那么是否可以將復(fù)雜的繪制過(guò)程放到后臺(tái)線程中執(zhí)行瞭稼，從而減輕主線程負(fù)擔(dān)，來(lái)提升 UI 流暢度呢腻惠？
可以的弛姜，系統(tǒng)給我們留下的異步繪制的口子，請(qǐng)看下面的流程圖妖枚，它是我們進(jìn)行基本繪制的基礎(chǔ):
- 首先 UIView 調(diào)用 setNeedsDisplay 方法
- 其次是調(diào)用其 layer 屬性的同名方法（view.layer setNeedsDisplay）
- 這時(shí) layer 并不會(huì)立刻調(diào)用 display 方法,而是要等到當(dāng)前 runloop 即將結(jié)束的時(shí)候調(diào)用 display廷臼，進(jìn)入到繪制流程。
- 在 UIView 中 layer.delegate 就是 UIView 本身，UIView 并沒(méi)有實(shí)現(xiàn) displayLayer: 方法荠商，所以進(jìn)入系統(tǒng)的繪制流程寂恬，我們可以通過(guò)實(shí)現(xiàn) displayLayer: 方法來(lái)進(jìn)行異步繪制。
所以去實(shí)現(xiàn) displayLayer 方式莱没，實(shí)現(xiàn)開(kāi)啟異步繪制入口
在“異步繪制入口”去開(kāi)辟子線程初肉，然后在子線程中實(shí)現(xiàn)和系統(tǒng)類(lèi)似的繪制流程。
系統(tǒng)繪制流程
- 首先 CALayer 會(huì)在內(nèi)部創(chuàng)建 一個(gè)上下文環(huán)境 (CGContextRef)
- 然后判斷 layer 是否有代理：
- 沒(méi)有代理的話饰躲，就調(diào)用 layer 的 drawInContext: 方法
- 有代理的話牙咏，調(diào)用 delegate 的
drawLayer : inContext方法，這個(gè)方法實(shí)現(xiàn)是系統(tǒng)完成嘹裂。 - 然后在合適的時(shí)機(jī)回調(diào)代理妄壶，調(diào)用 drawRect 默認(rèn)操作是什么都不做（而之所以有這個(gè)接口,就是為了讓我們?cè)谙到y(tǒng)繪制之后,還可以做些自定義的繪制工作）。
- 最后無(wú)論是哪個(gè)分支都把 backing store (上下文環(huán)境) 的 bitmap 位圖提交到 GPU寄狼，
- 也就是將生成的 bitmap 位圖賦值給 layer.content 屬性丁寄。
好了，下面是重點(diǎn)泊愧，如何實(shí)現(xiàn)異步繪制的過(guò)程
下面看一下異步繪制的時(shí)序圖能更好的理解異步繪制流程：
- 首先在主線程調(diào)用 setNeedsdispay 方法
- 系統(tǒng)會(huì)在 runloop 將要結(jié)束的時(shí)候調(diào)用 [CAlayer display] 方法
- 如果我們的代理實(shí)現(xiàn)了dispayLayer 這個(gè)方法伊磺，會(huì)調(diào)用 dispayLayer 這個(gè)方法。我們可以去子線程里面進(jìn)行異步繪制删咱。子線程主要做的工作：
- 創(chuàng)建上下文
- UI控件的繪制工作
- 生成對(duì)應(yīng)的圖片（bitmap）
4.主線程可以做其他工作
- 異步繪制完事之后屑埋，回到主線程，把繪制的 bitmap 賦值 view.layer.contents 屬性中
面試考點(diǎn)
我們調(diào)用 [UIView setNeedsDisplay] 方法的時(shí)候痰滋，不會(huì)立馬發(fā)送對(duì)應(yīng)視圖的繪制工作摘能，為什么？
調(diào)用 [UIView setNeedsDisplay] 后即寡，
然后會(huì)調(diào)用系統(tǒng)的同名方法 [view.layer setNeedsDisplay] 方法并在當(dāng)前 view 上面打上一個(gè)臟標(biāo)記
當(dāng)前 Runloop 將要結(jié)束的時(shí)候才會(huì)調(diào)用 [CALyer display] 方法徊哑，然后進(jìn)入到視圖真正的繪制工作當(dāng)中袜刷。
是否知道異步繪制聪富？如何進(jìn)行異步繪制？
基于系統(tǒng)開(kāi)的口子 [layer.delegate dispayLayer:] 方法著蟹。
并且實(shí)現(xiàn)/遵從了 dispayLayer 這個(gè)方法墩蔓，我們就可以進(jìn)行異步繪制：
1）代理負(fù)責(zé)生產(chǎn)對(duì)應(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.reibang.com/p/86f025f06d62] coreText用法簡(jiǎn)介:[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)奸披，因?yàn)榈讓幼鴺?biāo)系和 UIKit 坐標(biāo)系原點(diǎn)位置不同。
CGContextSetTextMatrix(context, CGAffineTransformIdentity);
// 文本沿著Y軸移動(dòng)
CGContextTranslateCTM(context, 0, size.height); // 原點(diǎn)為左下角
// 文本反轉(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)常會(huì)執(zhí)行多個(gè)繪制任務(wù)阵面，這里考慮開(kāi)辟多個(gè)線程去異步執(zhí)行。首選并行隊(duì)列可以滿足，但為了滿足性能效率的同時(shí)確保不過(guò)多的占用資源和避免線程間競(jìng)爭(zhēng)等待样刷，更好的方案應(yīng)該是開(kāi)辟多個(gè)串行隊(duì)列單線程處理并發(fā)任務(wù)仑扑。
接下來(lái)的問(wèn)題是，異步繪制創(chuàng)建幾個(gè)串行隊(duì)列合適置鼻？最大并發(fā)數(shù)參考SDWebImage圖片下載并發(fā)數(shù)的限制數(shù)：6镇饮。
