iOS設(shè)備的硬件時鐘會發(fā)出Vsync（垂直同步信號），然后App的CPU會去計算屏幕要顯示的內(nèi)容，之后將計算好的內(nèi)容提交到GPU去渲染。隨后，GPU將渲染結(jié)果提交到幀緩沖區(qū)，等到下一個VSync到來時將緩沖區(qū)的幀顯示到屏幕上。也就是說，一幀的顯示是由CPU和GPU共同決定的。

ios_frame_drop.png

從上圖可以看出，第三個Vsyc到來時GPU還沒有渲染好，這一幀就會被丟棄，等待下一次機(jī)會，此時屏幕上顯示的還是之前的內(nèi)容，這就是界面卡頓的原因。也就是說，不管GPU還是CPU阻礙了顯示的流程，都會造成掉幀的現(xiàn)象。
我們在繪制圓角時經(jīng)常會用到layer的屬性：

 _view1.layer.cornerRadius = 10;
 _view1.layer.masksToBounds = YES;

CALayer的border，cornerRadius，陰影，mask，通常會觸發(fā)離屏渲染（offscreen rendering），而離屏渲染通常發(fā)生在GPU中，當(dāng)一個列表中有大量的圓角使用calayer并快速滑動時，可以觀察到GPU的資源已經(jīng)占滿，而CPU的資源消耗很少。這時界面的幀數(shù)會降低，會有卡頓的情況。
為了避免這種情況，可以嘗試開啟CALayer.shouldRasterize屬性，這會把原本離屏渲染的操作轉(zhuǎn)嫁到CPU上。也可以把一張已經(jīng)繪制好的圓角圖片覆蓋到原本的視圖上。最徹底的解決辦法是，把需要顯示的圖形在后臺線程繪制為圖片，避免使用CALayer的屬性。
我用collectionviewcell的CALayer繪制圓角，在真機(jī)上滑動列表測的時候有明顯的卡頓。

    UICollectionViewCell * cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"cell" forIndexPath:indexPath];
    UIImageView * view = [cell viewWithTag:1000];
    if (!view) {
        view = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, 20, 20)];
        [cell addSubview:view];
        view.tag = 1000;
        view.backgroundColor = [UIColor redColor];
        view.image = [UIImage imageNamed:@"qq"];
        view.layer.cornerRadius = 10;
        view.layer.masksToBounds = YES;
    }
   return cell;

屏幕快照 2017-02-07 下午3.00.26.png

不使用calayer，對image進(jìn)行裁剪，滑動列表不再卡頓：

    UICollectionViewCell * cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"cell" forIndexPath:indexPath];
    UIImageView * view = [cell viewWithTag:1000];
    if (!view) {
        view = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, 20, 20)];
        [cell addSubview:view];
        view.tag = 1000;
        dispatch_queue_t backQueue = dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_DEFAULT, 0);
        dispatch_async(backQueue, ^{
            UIImage * image = [self cutCircleImageWithImage:[UIImage imageNamed:@"qq"] size:view.frame.size radious:10];
            dispatch_async(dispatch_get_main_queue(), ^{
                view.image = image;
            });
        });
    }
    return cell;

- (UIImage *)cutCircleImageWithImage:(UIImage *)image size:(CGSize)size radious:(CGFloat)radious {
    UIGraphicsBeginImageContextWithOptions(size, NO, [UIScreen mainScreen].scale);
    
    CGRect rect = CGRectMake(0, 0, size.width, size.height);
    CGContextAddPath(UIGraphicsGetCurrentContext(),
                     [UIBezierPath bezierPathWithRoundedRect:rect cornerRadius:radious].CGPath);
    CGContextClip(UIGraphicsGetCurrentContext());
    
    [image drawInRect:rect];
    UIImage *newImage = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();
    return newImage;
}

屏幕快照 2017-02-07 下午2.45.06.png