UIWebView白屏的监控&监控JS文件加载

祭出demo
现在很多App都改用h5来处理了。使用过程中引发了很多白屏现象，很多种原因会引起白屏。比如网络不通，JS加载慢，加载失败，JS文件缺失等。

就我测试看，h5没有本地化的，网络不通，页面白屏非常正常，这个都不用去监控了。JS文件不存在这种情况的可能性也不大，如果JS文件缺失导致白屏，已经构成了生产事故了。

我在这里讲讲JS加载慢和JS加载失败导致的白屏现象。

1、如何监控到JS文件 加载

通过监控UIWebView里的网络请求来监控js文件的加载

1.1、创建NSURLProtocol的子类

@interface QLRainURLProtocol : NSURLProtocol

@end

@implementation QLRainURLProtocol
@end

1.2、 从所有请求里甄别到js文件的请求

//对js文件做监控
+ (BOOL)canInitWithRequest:(NSURLRequest *)request {
    
    NSString * urlstring = [request.URL absoluteString];
    
    if ([urlstring containsString:@".js"]) {
        //看看是否已经处理过了，防止无限循环
        if ([NSURLProtocol propertyForKey:rainMarkKey inRequest:request]) {
            return NO;
        }
        return YES;
    }
    return NO;
}

1.3、 对URLRequest做处理，同时标记处理

//我们可以对request进行处理。。最后返回一个处理后的request实例。
+ (NSURLRequest *)canonicalRequestForRequest:(NSURLRequest *)request {
    NSMutableURLRequest *mutableReqeust = [request mutableCopy];
    [mutableReqeust willChangeValueForKey:@"timeoutInterval"];
    mutableReqeust.timeoutInterval = 30.0f;//设置超时时间为30秒,经测试没什么用。
    [mutableReqeust didChangeValueForKey:@"timeoutInterval"];
    [NSURLProtocol setProperty:@YES
                        forKey:rainMarkKey
                     inRequest:mutableReqeust];
    return [mutableReqeust copy];
}

1.4、开始加载

- (void)startLoading
{
    self.connection = [[NSURLConnection alloc] initWithRequest:self.request delegate:self startImmediately:YES];
}

1.5、 加载结束

- (void)stopLoading {
    //因为要处理失败的文件，所以就不在这里移除失败的内容了。
    [self.connection cancel];
}

1.6、发起connection的代理方法

#pragma mark - NSURLConnectionDelegate
- (void)connection:(NSURLConnection *)connection didFailWithError:(NSError *)error{
    
    [self.client URLProtocol:self didFailWithError:error];
}

- (BOOL)connectionShouldUseCredentialStorage:(NSURLConnection *)connection{
    return YES;
}

- (void)connection:(NSURLConnection *)connection didReceiveAuthenticationChallenge:(NSURLAuthenticationChallenge *)challenge{
    [self.client URLProtocol:self didReceiveAuthenticationChallenge:challenge];
}

- (void)connection:(NSURLConnection *)connection didCancelAuthenticationChallenge:(NSURLAuthenticationChallenge *)challenge {
    [self.client URLProtocol:self didCancelAuthenticationChallenge:challenge];
}


#pragma mark - NSURLConnectionDataDelegate
-(NSURLRequest *)connection:(NSURLConnection *)connection willSendRequest:(NSURLRequest *)request redirectResponse:(NSURLResponse *)response{
    if (response != nil) {
        [self.client URLProtocol:self wasRedirectedToRequest:request redirectResponse:response];
    }
    return request;
}

- (void)connection:(NSURLConnection *)connection didReceiveResponse:(NSURLResponse *)response {
    [[self client] URLProtocol:self didReceiveResponse:response cacheStoragePolicy:NSURLCacheStorageAllowed];
}

- (void)connection:(NSURLConnection *)connection didReceiveData:(NSData *)data {
    [self.client URLProtocol:self didLoadData:data];
}

- (NSCachedURLResponse *)connection:(NSURLConnection *)connection
                  willCacheResponse:(NSCachedURLResponse *)cachedResponse {
    return cachedResponse;
}

- (void)connectionDidFinishLoading:(NSURLConnection *)connection {
    
    
    [[self client] URLProtocolDidFinishLoading:self];
}
/*
每个connection都有个clinet 通过client可以把请求过程中的各种状态和数据转发出去，交给原始请求。
*/

到这里对js文件请求的监控都能获取到了。

2、如何判断JS文件加载慢
JS 文件是否加载慢，可以通过抓包查看，如下图

js文件抓包

从上面的图片可以看到vendor.*****.js这个文件花了23秒。js文件没加载完成前，客户端上看到的现象就是白屏的。
我们可以判断JS文件加载超过5秒，我们就认为是慢加载了。其实超过1秒的加载就可以认为是慢加载，因为一个文件1秒，10个文件就是10秒了，对用户讲，10秒已经很长时间了。

3、如何判断JS文件加载失败

在下面的方法里可以知道JS文件加载失败了

- (void)connection:(NSURLConnection *)connection didFailWithError:(NSError *)error{
    
    [self.client URLProtocol:self didFailWithError:error];
}
/*
这里可以监控哪个JS文件加载失败了
*/

4、如何跟踪所有的JS文件加载
我想了一个策略，对每个JS请求都做一个标记，并且另起一个单例来管理这些标记。这样就不会混乱，不知道哪个请求是哪个文件的了。

- (void)startLoading
{
    self.connection = [[NSURLConnection alloc] initWithRequest:self.request delegate:self startImmediately:YES];
    
    NSString *fileName = [self.request.URL.absoluteString lastPathComponent];
    NSString *markKey = [fileName stringByAppendingFormat:@"%@_%ld",fileName,(long)[UrlProtocolManager shareUrlProtocolManager].requestTag];
    self.remarkKey = markKey;
    [UrlProtocolManager shareUrlProtocolManager].requestTag++;
    [[UrlProtocolManager shareUrlProtocolManager] addRequestWithRemarkKey:markKey andFileName:fileName];
    
}

5、上传监控到的JS文件名
当你扫描请求时，发现请求超过5秒的就开始上报文件名，发现请求失败的也上报文件名。

6、管理请求和标记的单例
它的作用是记录请求标记，同时记录请求的开始时间戳。

@interface UrlProtocolManager:NSObject
@property (nonatomic, strong)NSMutableDictionary <NSString *,NSDictionary*>*requestDictionary;//存储请求标识
@property (nonatomic, assign)NSInteger requestTag;
@property (nonatomic, strong) dispatch_source_t timer;
@end

@implementation UrlProtocolManager
+ (instancetype)shareUrlProtocolManager {
    static UrlProtocolManager *shareInstance = nil;
    static dispatch_once_t onceToken;
    dispatch_once(&onceToken, ^{
        shareInstance = [[UrlProtocolManager alloc]init];
    });
    return shareInstance;
}
-(instancetype)init {
    self = [super init];
    if (self) {
        self.requestDictionary = @{}.mutableCopy;
        self.requestTag = 0;
        [self createTimer];
    }
    return self;
}

//启动计时器
- (void)createTimer {
    NSLog(@"%s",__FUNCTION__);
    NSInteger timeout = 7;//7秒执行一次
    //获取全局队列
    dispatch_queue_t global = dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_DEFAULT, 0);
    
    //创建一个定时器，并将定时器的任务交给全局队列执行(并行，不会造成主线程阻塞)
    self.timer = dispatch_source_create(DISPATCH_SOURCE_TYPE_TIMER, 0, 0, global);
    
    // 设置触发的间隔时间
    dispatch_source_set_timer(_timer, DISPATCH_TIME_NOW, timeout * NSEC_PER_SEC, 0 * NSEC_PER_SEC);
    //timeout * NSEC_PER_SEC  代表设置定时器触发的时间间隔为timeout s
    //0 * NSEC_PER_SEC    代表时间允许的误差是 0s
    __weak typeof(self)weakSelf = self;
    dispatch_source_set_event_handler(_timer, ^{
        NSLog(@"start timer");
        NSMutableString *resultStr = @"".mutableCopy;
        NSArray *allKeys = weakSelf.requestDictionary.allKeys;
        NSInteger allKeyCount = allKeys.count;
        if (allKeyCount > 0) {
            for (NSInteger i = 0; i < allKeyCount; i ++) {
                NSString *dicKey = allKeys[i];
                NSDictionary *dic = [weakSelf.requestDictionary objectForKey:dicKey];
                if (dic != nil) {
                    NSNumber *timeMarkLong = [dic objectForKey:fileUrlProtocolRecodeTimeKey];
                    NSTimeInterval currentTime = [[NSDate date] timeIntervalSince1970];
                    if (currentTime - [timeMarkLong doubleValue] >= sexSeconds ) {
                        NSString *fileName = [dic objectForKey:fileUrlProtocolNameKey];
                        [resultStr appendFormat:@"%@_",fileName];
                        [weakSelf.requestDictionary removeObjectForKey:dicKey];//监控到的key记录之后就移除掉
                    }
                }
                
            }
            NSLog(@"resultStr is \n%@",resultStr);
        }
        
    });
    
    dispatch_resume(_timer);
    
}

- (void)addRequestWithRemarkKey:(NSString *)remarkKey andFileName:(NSString *)fileName {
    NSTimeInterval timeMark = [[NSDate date] timeIntervalSince1970];
    NSDictionary *fileDic = @{
                              fileUrlProtocolNameKey:fileName,
                              fileUrlProtocolRecodeTimeKey:@(timeMark)
                              };
    [[UrlProtocolManager shareUrlProtocolManager].requestDictionary setObject:fileDic forKey:remarkKey];
}

- (void)removeRequestWithRemarkKey:(NSString *)remarkKey {
    [[UrlProtocolManager shareUrlProtocolManager].requestDictionary removeObjectForKey:remarkKey];
}

- (void)destroyTimer {
    dispatch_source_cancel(_timer);
}

@end

7、开发过程中遇到的坑

7.1、监控到的请求会被循环监控，进入死循环
通过在+ (NSURLRequest *)canonicalRequestForRequest:(NSURLRequest *)request里监控到的请求加个标识，在+ (BOOL)canInitWithRequest:(NSURLRequest *)request里识别这个标识，当发现有标识时就不监控了，但是没有标识的，就告知需要监控。这样就不会死循环了。
7.2、定时扫描监控的标志请求。
当时想过用NSTimer，但是NSTimer会被用户的UI操作中断，所以就选了GCD里使用Timer这样就不会中断了。我的demo里是每7秒扫描一次标志请求，发现请求超过6秒的就定义为慢加载，同时移除该请求标志，避免重复识别。

祭出demo

更新时间: 2018-08-22