在進(jìn)行iOS的應(yīng)用開發(fā)過程中掰派，有時(shí)會(huì)出現(xiàn)卡頓的問題，雖然iOS的設(shè)備性能越來越高种蝶，但是卡頓的為題偶爾還是會(huì)出現(xiàn)契耿，而離屏渲染是造成卡頓的主要原因之一。因此螃征，本文主要分析一下離屏渲染產(chǎn)生的原因及避免的方法（本文摘抄自博客園：飛魚灣的文章）
UIView和CALayer的關(guān)系
UIView繼承自UIResponder搪桂，可以處理系統(tǒng)傳遞過來的各類事件，如UIApplication盯滚，UIViewController踢械，UIView以及所有從UIVIew派生出來的UIKit類，每個(gè)UIVIew內(nèi)部都有一個(gè)CALayer提供內(nèi)容的繪制和顯示魄藕，并且作為內(nèi)部RootLayer的代理視圖
CALayer繼承自NSObject内列，負(fù)責(zé)顯示UIVIew提供的內(nèi)容contents，CALayer有三個(gè)視覺元素：背景色背率，內(nèi)容和邊框话瞧，其中嫩与，內(nèi)容的本質(zhì)是一個(gè)CGImage。
界面渲染過程
Runloop有一個(gè)60fps的回調(diào)交排，即每16.7ms繪制一次屏幕划滋，所以view的繪制必須在這個(gè)時(shí)間內(nèi)完成，view的繪制是CPU的工作埃篓，然后把繪制的內(nèi)容交給GPU去渲染处坪，包括多個(gè)view的拼接，紋理的渲染等等都许，最后顯示在屏幕上稻薇，但是嫂冻，如果無法在16.7ms內(nèi)完成繪制胶征，就會(huì)出現(xiàn)丟幀的情況，一般時(shí)候桨仿，如果幀率保持在30fps以上睛低，界面卡頓就不明顯，那么就需要在33.4秒內(nèi)完成view的繪制服傍，低于這個(gè)幀率钱雷，就會(huì)產(chǎn)生卡頓的效果，造成影響
渲染過程如下
- UIView的layer層有一個(gè)content吹零，指向一塊緩存罩抗，即backing store
- UIVIew會(huì)知識(shí)，會(huì)調(diào)用drawRect方法灿椅，通過context上下文將數(shù)據(jù)寫入backing store
-
在backing store寫完后套蒂，通過render server 交給GPU去渲染，將緩沖區(qū)backing store中的bitmap顯示在屏幕上圖二
離屏渲染
在使用圓角茫蛹，陰影和遮罩等視圖功能的時(shí)候操刀，圖層屬性的混合體被指定為在未合成之前不能直接在屏幕中繪制，所以需要在屏幕的上下文中渲染婴洼，即離屏渲染.
離屏渲染卡頓的原因
離屏渲染之所以特別消耗性能骨坑，是因?yàn)橐獎(jiǎng)?chuàng)建一個(gè)屏幕外的緩沖區(qū)，然后從當(dāng)前屏緩沖區(qū)切換到屏幕外的緩沖區(qū)柬采，然后在完成渲染欢唾；其中，創(chuàng)建緩沖區(qū)和切換上下文最小號(hào)性能粉捻，而繪制其實(shí)不是性能損耗的主要原因
以下屬性會(huì)觸發(fā)離屏渲染
- shouldRasterize（光柵化）
- masks(遮罩)
- shadows(陰影)
- edge antialiasing(抗鋸齒)
- group opacity(不透明)
- 復(fù)雜形狀設(shè)置圓角
- 漸變
離屏渲染類型
CPU 計(jì)算好顯示內(nèi)容提交到GPU匈辱，GPU渲染完成后將渲染結(jié)果放入到幀緩沖區(qū)沒隨后視頻控制器會(huì)按照VSync新號(hào)裝讀取幀緩沖區(qū)的視頻，經(jīng)過可能的數(shù)據(jù)轉(zhuǎn)換傳遞給顯示器顯示
屏幕渲染有如下三種
GPU中的屏幕渲染
- ON-screen rendering
當(dāng)前屏幕渲染杀迹，指的是GPU的渲染操作是在當(dāng)前用于顯示的屏幕緩沖區(qū)進(jìn)行 - off-screen rendering
離屏渲染亡脸，指的是GPU在當(dāng)前屏幕緩沖區(qū)意外新開辟一個(gè)緩沖區(qū)進(jìn)行渲染操作 - CPU中的離屏渲染（特殊離屏渲染押搪，即不在GPu中渲染）
如果我們重寫了drawrect方法，并且使用任何core graphics的技術(shù)進(jìn)行繪制操作浅碾，就涉及到了CPU的渲染
**
coreGraphic通常是線程安全的大州，可以進(jìn)行異步繪制，顯示的時(shí)候再放回到主線程
**
切圓角優(yōu)化
切圓角是開發(fā)app過程中經(jīng)常會(huì)用到的功能垂谢，但是使用不同的方式厦画，性能損耗也會(huì)不同，下面會(huì)介紹3種切圓角的方法滥朱；其中根暑，方法三的性能相對(duì)最好
- 使用cornerradius進(jìn)行切圓角，在iOS9之前會(huì)產(chǎn)生離屏渲染徙邻，比較消耗性能排嫌，而后系統(tǒng)做了優(yōu)化，則不會(huì)產(chǎn)生離屏渲染缰犁，比較簡(jiǎn)單
iv.layer.cornerRadius = 30;
iv.layer.masksToBounds = YES;
- 利用mask設(shè)置圓角淳地，利用的是UIBezierPath和CAShaperLayer來完成
CAShapeLayer *mask1 = [[CAShapeLayer alloc] init];
mask1.opacity = 0.5;
mask1.path = [UIBezierPath bezierPathWithOvalInRect:iv.bounds].CGPath;
iv.layer.mask = mask1;
- 利用coregraphics畫一個(gè)圖形上下文，然后把圖片繪制上去帅容，得到一個(gè)圓形的圖片颇象，達(dá)到切圓角的目的
- (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;
}
