[iOS 知识总结三] 如何解决更新UI 卡顿问题
2017-06-23 本文已影响1058人
pengxuyuan
前言
我们知道为了不阻塞主线程，我们会将耗时操作丢到子线程里面去处理。但是如果遇到更新UI 卡顿的时候，我们并不能将UI 操作丢到子线程去，因为如果不在主线程来更新UI 的话，总会出现莫名奇怪的错误
我们模拟这样一个场景：一个TableView，每个Cell 都有几个UIImageView 控件来加载一个本地高清大图，而且用imageWithContentsOfFile 来加载图片，这样子更新UI 的时候时间就会比较长（加载 and 渲染），这样子就会出现我们的卡顿的问题了。UI 结构如下图：
1147A3D7-B36D-4EB6-A209-8C881A1C5CE0
RunLoopMode 有5种，一个时刻RunLoop 只能处在一种模式下
NSDefaultRunLoopMode 默认模式
UITrackingRunLoopMode UI模式
NSRunLoopCommonModes 占位模式
刚启动进入的Mode UIInitializationRunLoopMode
接收系统内核事件Mode GSEventReceiveRunLoopMode
CFRunLoopSources
按照函数调用栈分为两类
Source0：非Sources1 的事件
Sources1：通过内核、系统分发的事件
CFRunLoopTimer
管理定时器的调度
CFRunLoopObserver
观察者，观察当前RunLoop 在某个模式下的状态改变
/* Run Loop Observer Activities */
typedef CF_OPTIONS(CFOptionFlags, CFRunLoopActivity) {
kCFRunLoopEntry = (1UL << 0),
kCFRunLoopBeforeTimers = (1UL << 1),
kCFRunLoopBeforeSources = (1UL << 2),
kCFRunLoopBeforeWaiting = (1UL << 5),
kCFRunLoopAfterWaiting = (1UL << 6),
kCFRunLoopExit = (1UL << 7),
kCFRunLoopAllActivities = 0x0FFFFFFFU
};
多线程使用RunLoop
我们可以将Timer 添加到子线程的RunLoop 中，但是发现Timer 事件不会触发，我们需要知道以下两点：
- 线程默认是没有RunLoop 的，需要我们手动创建
- RunLoop 是需要开启的(run)
如果没有做到这两点，这个线程会执行一次任务之后，会因为没有任务做，而被CPU 回收
NSThread *thread = [[NSThread alloc] initWithBlock:^{
NSTimer *timer = [NSTimer timerWithTimeInterval:0.1 target:self selector:@selector(time1) userInfo:nil repeats:YES];
[[NSRunLoop currentRunLoop] addTimer:timer forMode:NSRunLoopCommonModes];
[[NSRunLoop currentRunLoop] run];
}];
[thread start];
//如果没有[[NSRunLoop currentRunLoop] run]; 这个代码，我们这个thread 线程会被回收
AutoreleasePool 自动释放池的释放
在进入RunLoop 时候会创建自动释放池，在准备休眠的时候会释放旧的释放池并且创建新的释放池，在Exit 退出的时候会释放自动释放池
界面更新
当在操作 UI 时，比如改变了 Frame、更新了 UIView/CALayer 的层次时，或者手动调用了 UIView/CALayer 的 setNeedsLayout/setNeedsDisplay方法后，这个 UIView/CALayer 就被标记为待处理，并被提交到一个全局的容器去。
苹果注册了一个 Observer 监听 BeforeWaiting(即将进入休眠) 和 Exit (即将退出Loop) 事件，回调去执行一个很长的函数：
_ZN2CA11Transaction17observer_callbackEP19__CFRunLoopObservermPv()。这个函数里会遍历所有待处理的 UIView/CAlayer 以执行实际的绘制和调整，并更新 UI 界面。
解决思路
-
分析卡顿
RunLoop 负责渲染UI，每一个循环都会去渲染这次循环中的UI 变动，我们加载大图耗时，导致RunLoop 这次循环的有点久，所以就会出现卡顿
我们一屏幕有18张图片，这样子最多一次渲染18张图片，所以卡顿
-
解决思路
既然知道一次RunLoop 加载太多图片会卡顿，我们将这些耗时加载丢到每个RunLoop 中
-
解决方案
- 将任务分块
- performSelector 来解决
- CFRunLoopObserverRef 监测RunLoop 的每次循环
// ViewController.m
// 加载高清大图
//
// Created by H on 17/1/12.
// Copyright © 2017年 H. All rights reserved.
// 加载大图耗时!! 为什么会taobleview滚动卡顿呢?
// 因为 一次RunLoop循环需要加载所有的屏幕上的点
// 因为图片很大..所以这次RunLoop循环有点久...
// RunLoop 循环有点久 就造成卡顿!!
// 说白了 一次RunLoop 加载了 18张图片 所以有点久
// 每次RunLoop循环 加载1 张!!
// 思路: 弄一个数组!! 装代码!!!
// 返回cell的数据源方法!不加载图片!!(加载图片的代码丢到数组里面!)
// 监听RunLoop循环 -- 一次循环就从数组中拿代码执行!!
//函数指针!!
#import "ViewController.h"
//定义block
typedef BOOL(^RunloopBlock)(void);
static NSString * IDENTIFIER = @"IDENTIFIER";
static CGFloat CELL_HEIGHT = 135.f;
@interface ViewController ()<UITableViewDataSource,UITableViewDelegate>
@property (nonatomic, strong) UITableView *exampleTableView;
/** 时钟事件 */
@property(nonatomic,strong)NSTimer * timer;
/** 数组 */
@property(nonatomic,strong)NSMutableArray * tasks;
/** 最大任务s */
@property(assign,nonatomic)NSUInteger maxQueueLength;
@end
@implementation ViewController
//因为消息发送机制!!那么我们可以优化!! 直接用底层代码!哥么发消息!不用OC调用方法!!
//Runtime 里面讲!!
-(void)timerMethod{
//任何事情都不做!!!
}
- (void)viewDidLoad {
[super viewDidLoad];
_timer = [NSTimer scheduledTimerWithTimeInterval:0.001 target:self selector:@selector(timerMethod) userInfo:nil repeats:YES];
//注册Cell
[self.exampleTableView registerClass:[UITableViewCell class] forCellReuseIdentifier:IDENTIFIER];
//添加RunLoop的监听
[self addRunloopObserver];
_maxQueueLength = 18;
_tasks = [NSMutableArray array];
}
//MARK: 内部实现方法
//添加文字
+(void)addlabel:(UITableViewCell *)cell indexPath:(NSIndexPath *)indexPath{
UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(5, 5, 300, 25)];
label.backgroundColor = [UIColor clearColor];
label.textColor = [UIColor redColor];
label.text = [NSString stringWithFormat:@"%zd - Drawing index is top priority", indexPath.row];
label.font = [UIFont boldSystemFontOfSize:13];
label.tag = 4;
[cell.contentView addSubview:label];
UILabel *label1 = [[UILabel alloc] initWithFrame:CGRectMake(5, 99, 300, 35)];
label1.lineBreakMode = NSLineBreakByWordWrapping;
label1.numberOfLines = 0;
label1.backgroundColor = [UIColor clearColor];
label1.textColor = [UIColor colorWithRed:0 green:100.f/255.f blue:0 alpha:1];
label1.text = [NSString stringWithFormat:@"%zd - Drawing large image is low priority. Should be distributed into different run loop passes.", indexPath.row];
label1.font = [UIFont boldSystemFontOfSize:13];
label1.tag = 5;
[cell.contentView addSubview:label1];
}
//加载第一张
+(void)addImage1With:(UITableViewCell *)cell{
//第一张
UIImageView *imageView = [[UIImageView alloc] initWithFrame:CGRectMake(5, 20, 85, 85)];
imageView.tag = 1;
NSString *path1 = [[NSBundle mainBundle] pathForResource:@"spaceship" ofType:@"png"];
UIImage *image = [UIImage imageWithContentsOfFile:path1];
imageView.contentMode = UIViewContentModeScaleAspectFit;
imageView.image = image;
[UIView transitionWithView:cell.contentView duration:0.3 options:(UIViewAnimationOptionCurveEaseInOut | UIViewAnimationOptionTransitionCrossDissolve) animations:^{
[cell.contentView addSubview:imageView];
} completion:nil];
}
//加载第二张
+(void)addImage2With:(UITableViewCell *)cell{
//第二张
UIImageView *imageView1 = [[UIImageView alloc] initWithFrame:CGRectMake(105, 20, 85, 85)];
imageView1.tag = 2;
NSString *path1 = [[NSBundle mainBundle] pathForResource:@"spaceship" ofType:@"png"];
UIImage *image1 = [UIImage imageWithContentsOfFile:path1];
imageView1.contentMode = UIViewContentModeScaleAspectFit;
imageView1.image = image1;
[UIView transitionWithView:cell.contentView duration:0.3 options:(UIViewAnimationOptionCurveEaseInOut | UIViewAnimationOptionTransitionCrossDissolve) animations:^{
[cell.contentView addSubview:imageView1];
} completion:nil];
}
//加载第三张
+(void)addImage3With:(UITableViewCell *)cell{
//第三张
UIImageView *imageView2 = [[UIImageView alloc] initWithFrame:CGRectMake(200, 20, 85, 85)];
imageView2.tag = 3;
NSString *path1 = [[NSBundle mainBundle] pathForResource:@"spaceship" ofType:@"png"];
UIImage *image2 = [UIImage imageWithContentsOfFile:path1];
imageView2.contentMode = UIViewContentModeScaleAspectFit;
imageView2.image = image2;
[UIView transitionWithView:cell.contentView duration:0.3 options:(UIViewAnimationOptionCurveEaseInOut | UIViewAnimationOptionTransitionCrossDissolve) animations:^{
[cell.contentView addSubview:imageView2];
} completion:nil];
}
//MARK: UI初始化方法
//设置tableview大小
- (void)viewWillAppear:(BOOL)animated {
[super viewWillAppear:animated];
self.exampleTableView.frame = self.view.bounds;
}
//Cell 高度
- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath {
return CELL_HEIGHT;
}
//加载tableview
- (void)loadView {
self.view = [UIView new];
self.exampleTableView = [UITableView new];
self.exampleTableView.delegate = self;
self.exampleTableView.dataSource = self;
[self.view addSubview:self.exampleTableView];
}
#pragma mark - <tableview>
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
return 399;
}
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:IDENTIFIER];
cell.selectionStyle = UITableViewCellSelectionStyleNone;
//干掉contentView上面的子控件!! 节约内存!!
for (NSInteger i = 1; i <= 5; i++) {
//干掉contentView 上面的所有子控件!!
[[cell.contentView viewWithTag:i] removeFromSuperview];
}
//添加文字
[ViewController addlabel:cell indexPath:indexPath];
//添加图片 -- 耗时操作!!! 丢给每一次RunLoop循环!!!
[self addTask:^BOOL{
[ViewController addImage1With:cell];
return YES;
}];
[self addTask:^BOOL{
[ViewController addImage2With:cell];
return YES;
}];
[self addTask:^BOOL{
[ViewController addImage3With:cell];
return YES;
}];
return cell;
}
#pragma mark - <关于RunLoop的方法>
//添加新的任务的方法!
-(void)addTask:(RunloopBlock)unit {
[self.tasks addObject:unit];
//判断一下 保证没有来得及显示的cell不会绘制图片!!
if (self.tasks.count > self.maxQueueLength) {
[self.tasks removeObjectAtIndex:0];
}
}
//回调函数
static void Callback(CFRunLoopObserverRef observer, CFRunLoopActivity activity, void *info){
NSRunLoop *currentRunLoop = [NSRunLoop currentRunLoop];
NSLog(@"%p %@",currentRunLoop, currentRunLoop.currentMode);
//从数组里面取代码!! info 哥么就是 self
ViewController * vc = (__bridge ViewController *)info;
if (vc.tasks.count == 0) {
return;
}
BOOL result = NO;
while (result == NO && vc.tasks.count) {
//取出任务
RunloopBlock unit = vc.tasks.firstObject;
//执行任务
result = unit();
//干掉第一个任务
[vc.tasks removeObjectAtIndex:0];
}
}
//这里面都是c语言的代码
-(void)addRunloopObserver{
//获取当前RunLoop
CFRunLoopRef runloop = CFRunLoopGetCurrent();
//定义一个上下文
CFRunLoopObserverContext context = {
0,
(__bridge void *)(self),
&CFRetain,
&CFRelease,
NULL,
};
//定义一个观察者
static CFRunLoopObserverRef defaultModeObserver;
//创建观察者
defaultModeObserver = CFRunLoopObserverCreate(NULL, kCFRunLoopBeforeWaiting, YES, NSIntegerMax - 999, &Callback, &context);
//添加当前RunLoop的观察者
CFRunLoopAddObserver(runloop, defaultModeObserver, kCFRunLoopCommonModes);
//C语言里面有Creat\new\copy 就需要 释放 ARC 管不了!!
CFRelease(defaultModeObserver);
}
@end
引申
-
UIImage 的两种加载方式：
imageWithContentsOfFile和imageNamed区别还是挺大的imageNamed首先会去内存里查找是否有这个图片对象，找不到才会去加载资源文件的图片然后再次将图片对象缓存。imageWithContentsOfFile是直接去加载资源文件的，并不会去缓存这个图片到内存，所以这里这两个函数的使用场景还是有区别的，对于加载大图且使用场景比较少的时候，可以用imageWithContentsOfFile来降低内存消耗
- 让一个线程常驻内存，可以为线程创建一个RunLoop，并且Run 起来
