WKWebview秒开的实践及踩坑之路

[[413803]]

本文转载自微信公众号「网罗开发」，作者伤心的Easyman 。转载本文请联系网罗开发公众号。

优化背景

  • 众所周知，H5 的部分优势(开发快，迭代快，热更新)是很明显的，公司客户端的部分业务都是由 H5 来实现的，网络好的情况下体验也是很不错的
  • 但是其实 H5 的体验是比原生差的，这就需要想办法如何提高 H5 加载速度，优化体验，首屏的加载速度还是很影响体验的

加载速度

关于加载速度慢有很多文章都已经详细解释了，h5在加载工作中做了很多事

初始化 webview -> 请求页面 -> 下载数据 -> 解析HTML -> 请求 js/css 资源 -> dom 渲染 -> 解析 JS 执行 -> JS 请求数据 -> 解析渲染 -> 下载渲染图片

一般页面在 dom 渲染后才能展示，可以发现，H5 首屏渲染白屏问题的原因关键在于，如何优化减少从请求下载页面到渲染之间这段时间的耗时。

前后端优化

这其中可做的优化特别多，前后端能够做的是：

  • 降低请求量：减少 HTTP 请求数, 合并资源，minify / gzip 压缩，webP，lazyLoad。
  • 因为手机浏览器同时响应请求是 4 个，4 个的请求数也许不是特别靠谱，没有查到出处，但是肯定是越少越好。
  • HTTP 协议缓存请求，离线缓存 manifest，离线数据缓存 localStorage。
  • 加快请求速度：预解析 DNS，减少域名数，并行加载，CDN 分发。
  • 渲染：JS/CSS 优化，加载顺序，服务端渲染模板直出。

一般情况下，只要对照这个列表，对比差异就基本能搞定绝大部分前端性能问题了。不过我们在里面仔细再分析下，对首屏启动速度影响最大的就是网络请求，包括请求 HTML、css、image 等静态资源和展示数据的请求。所以客户端内，优化最关键的其实就是如何缓存这些网络资源，也就是离线包缓存方案。

离线包方案的实践

方案选型是两种

  • 基于 LocalWebServer 实现 WKWebView 离线资源加载
  • 使用 WKURLSchemeHandler 实现 WKWebView 离线资源加载

LocalWebServer

基于 iOS 的 local web server，目前大致有以下几种较为完善的框架：

  • CocoaHttpServer (支持 iOS、macOS 及多种网络场景)
  • GCDWebServer (基于 iOS，不支持 https 及 webSocket)
  • Telegraph (Swift 实现，功能较上面两类更完善)

当时采用的是 GCDWebServer，在打开 APP 后直接启动Webserver，H5 的链接直接替换成本地 localhost + 端口号链接的地址。

本来的方案是本地服务器和远端h5服务器同步下载资源，下载后客户端请求本地服务器的路径，如未找到相应的资源再请求远端服务器的资源文件。

测试过程中碰到很多奇怪的问题(暂不一一举例)，也有提到以下问题并且时间紧急所以并未做进一步的深入:

  • 资源访问权限安全问题
  • APP 前后台切换时，服务重启性能耗时问题
  • 服务运行时，电量及 CPU 占有率问题
  • 多线程及磁盘 IO 问题

WKURLSchemeHandler

关于离线包

前端项目的静态资源直接打包成 zip 包，APP 在启动时开始下载该包并解压到本地。WKWebview 通过 WKURLSchemeHandler 拦截并加载本地资源文件。关于离线包的分发，就是普通的 zip 离线包和一个版本控制的 json 文件，每次打离线包会修改 json 文件里的版本号，并附有离线包下载地址。此处可以优化的更好，但暂时并不需要太复杂。

离线包的下载和解压

只是简单的下载并解压到本地资源路径，关于版本比对的代码这里没有展示出来，自行注意，避免每次都全量更新。

 
 
 
 
    
  
  
  
  
  1. /* 创建网络下载对象 */ 
    2. 
  
  
  
  
  2. AFURLSessionManager *manager = [[AFURLSessionManager alloc] initWithSessionConfiguration:[NSURLSessionConfiguration defaultSessionConfiguration]]; 
    3. 
  
  
  
  
  3. /* 下载地址 */ 
    4. 
  
  
  
  
  4. NSURL *url = [NSURL URLWithString:request.urlParameters.path]; 
    5. 
  
  
  
  
  5. NSURLRequest *request = [NSURLRequest requestWithURL:url]; 
    6. 
  
  
  
  
  6. /* 下载路径 */ 
    7. 
  
  
  
  
  7. //获取Document文件 
    8. 
  
  
  
  
  8. NSString * docsdir = [NSSearchPathForDirectoriesInDomains(NSDocumentDirectory, NSUserDomainMask, YES) objectAtIndex:0]; 
    9. 
  
  
  
  
  9. NSString * zipFilePath = [docsdir stringByAppendingPathComponent:@"zip"];//将需要创建的串拼接到后面 
    10. 
  
  
  
  
  10. NSString * H5FilePath = [docsdir stringByAppendingPathComponent:@"H5"]; 
    11. 
  
  
  
  
  11. NSFileManager *fileManager = [NSFileManager defaultManager]; 
    12. 
  
  
  
  
  12. BOOL zipIsDir = NO; 
    13. 
  
  
  
  
  13. BOOL H5IsDir = NO; 
    14. 
  
  
  
  
  14. // fileExistsAtPath 判断一个文件或目录是否有效，isDirectory判断是否一个目录 
    15. 
  
  
  
  
  15. BOOL zipexisted = [fileManager fileExistsAtPath:zipFilePath isDirectory:&zipIsDir]; 
    16. 
  
  
  
  
  16. BOOL H5Existed = [fileManager fileExistsAtPath:H5FilePath isDirectory:&H5IsDir]; 
    17. 
  
  
  
  
  17. if ( !(zipIsDir == YES && zipexisted == YES) ) {//如果文件夹不存在 
    18. 
  
  
  
  
  18.     [fileManager createDirectoryAtPath:zipFilePath withIntermediateDirectories:YES attributes:nil error:nil]; 
    19. 
  
  
  
  
  19. } 
    20. 
  
  
  
  
  20. if (!(H5IsDir == YES && H5Existed == YES) ) { 
    21. 
  
  
  
  
  21.     [fileManager createDirectoryAtPath:H5FilePath withIntermediateDirectories:YES attributes:nil error:nil]; 
    22. 
  
  
  
  
  22. } 
    23. 
  
  
  
  
  23. //删除 
    24. 
  
  
  
  
  24. //        [[NSFileManager defaultManager] removeItemAtPath:zipFilePath error:nil]; 
    25. 
  
  
  
  
  25. NSString *filePath = [zipFilePath stringByAppendingPathComponent:url.lastPathComponent]; 
    26. 
  
  
  
  
  26. /* 开始请求下载 */ 
    27. 
  
  
  
  
  27. NSURLSessionDownloadTask *downloadTask = [manager downloadTaskWithRequest:request progress:^(NSProgress * _Nonnull downloadProgress) { 
    28. 
  
  
  
  
  28.     NSLog(@"下载进度：%.0f％", downloadProgress.fractionCompleted * 100); 
    29. 
  
  
  
  
  29. } destination:^NSURL * _Nonnull(NSURL * _Nonnull targetPath, NSURLResponse * _Nonnull response) { 
    30. 
  
  
  
  
  30.     /* 设定下载到的位置 */ 
    31. 
  
  
  
  
  31.     return [NSURL fileURLWithPath:filePath]; 
    32. 
  
  
  
  
  32. } completionHandler:^(NSURLResponse * _Nonnull response, NSURL * _Nullable filePath, NSError * _Nullable error) { 
    33. 
  
  
  
  
  33.     NSTimeInterval delta = CACurrentMediaTime() - self->start; 
    34. 
  
  
  
  
  34.      NSLog(@"下载完成，耗时：%f",delta); 
    35. 
  
  
  
  
  35.     // filePath就是你下载文件的位置，你可以解压，也可以直接拿来使用 
    36. 
  
  
  
  
  36.     NSString *imgFilePath = [filePath path];// 将NSURL转成NSString 
    37. 
  
  
  
  
  37.     NSString *zipPath = imgFilePath; 
    38. 
  
  
  
  
  38.     //删除  
    39. 
  
  
  
  
  39. //            [[NSFileManager defaultManager] removeItemAtPath:H5FilePath error:nil]; 
    40. 
  
  
  
  
  40.     [fileManager createDirectoryAtPath:H5FilePath withIntermediateDirectories:YES attributes:nil error:nil]; 
    41. 
  
  
  
  
  41.     //解压 
    42. 
  
  
  
  
  42.     [SSZipArchive unzipFileAtPath:zipPath toDestination:H5FilePath]; 
    43. 
  
  
  
  
  43.     //清理缓存 
    44. 
  
  
  
  
  44.     [DLCommenHelper clearWebCache]; 
    45. 
  
  
  
  
  45. }]; 
    46. 
  
  
  
  
  46. [downloadTask resume]; 
    47.

WKWebview 缓存池

美团有篇文章提到，在使用 iOS 10 的模拟器测试 WKWebView 的加载速度，首次初始化的时间耗时有 700 多毫秒。其实本人用 iOS 13 的真机，发现初始化的时间约在 200 毫秒左右甚至更短。虽然只占整个加载时间的特别小的一部分，但是本着能优则优的原则还是做了处理，也就是预加载 Webview。

  • 新建了一个单例类 SDIWKWebViewPool，默认缓存池里的数量是 10 个
 
 
 
 
    
  
  
  
  
  1. + (instancetype)sharedInstance { 
    2. 
  
  
  
  
  2.     static dispatch_once_t onceToken; 
    3. 
  
  
  
  
  3.     static SDIWKWebViewPool *instance = nil; 
    4. 
  
  
  
  
  4.     dispatch_once(&onceToken,^{ 
    5. 
  
  
  
  
  5.         instance = [[super allocWithZone:NULL] init]; 
    6. 
  
  
  
  
  6.     }); 
    7. 
  
  
  
  
  7.     return instance; 
    8. 
  
  
  
  
  8. } 
    9. 
  
  
  
  
  9.   
    10. 
  
  
  
  
  10. + (id)allocWithZone:(struct _NSZone *)zone{ 
    11. 
  
  
  
  
  11.     return [self sharedInstance]; 
    12. 
  
  
  
  
  12. } 
    13. 
  
  
  
  
  13.   
    14. 
  
  
  
  
  14. - (instancetype)init 
    15. 
  
  
  
  
  15. { 
    16. 
  
  
  
  
  16.     self = [super init]; 
    17. 
  
  
  
  
  17.     if (self) { 
    18. 
  
  
  
  
  18.         self.initialViewsMaxCount = 10; 
    19. 
  
  
  
  
  19.         self.preloadedViews = [NSMutableArray arrayWithCapacity:self.initialViewsMaxCount]; 
    20. 
  
  
  
  
  20.     } 
    21. 
  
  
  
  
  21.     return self; 
    22. 
  
  
  
  
  22. } 
    23.
  • 在合适的地方提前调用 //预加载wkwebview [[SDIWKWebViewPool sharedInstance] prepareWithCount:10];,自行选择在 delegate 或主页面初始化的时候调用。
 
 
 
 
    
  
  
  
  
  1. /** 
    2. 
  
  
  
  
  2.  预初始化若干WKWebView 
    3. 
  
  
  
  
  3.   
    4. 
  
  
  
  
  4.  @param count 个数 
    5. 
  
  
  
  
  5.  */ 
    6. 
  
  
  
  
  6. - (void)prepareWithCount:(NSUInteger)count { 
    7. 
  
  
  
  
  7.     NSTimeInterval start = CACurrentMediaTime(); 
    8. 
  
  
  
  
  8.     // Actually does nothing, only initialization must be called. 
    9. 
  
  
  
  
  9.     while (self.preloadedViews.count < MIN(count,self.initialViewsMaxCount)) { 
    10. 
  
  
  
  
  10.         id preloadedView = [self createPreloadedView]; 
    11. 
  
  
  
  
  11.         if (preloadedView) { 
    12. 
  
  
  
  
  12.             [self.preloadedViews addObject:preloadedView]; 
    13. 
  
  
  
  
  13.         } else { 
    14. 
  
  
  
  
  14.             break; 
    15. 
  
  
  
  
  15.         } 
    16. 
  
  
  
  
  16.     } 
    17. 
  
  
  
  
  17.     NSTimeInterval delta = CACurrentMediaTime() - start; 
    18. 
  
  
  
  
  18.     NSLog(@"=======初始化耗时：%f",  delta); 
    19. 
  
  
  
  
  19. } 
    20. 
  
  
  
  
  20.   
    21. 
  
  
  
  
  21. /** 
    22. 
  
  
  
  
  22.  从池中获取一个WKWebView 
    23. 
  
  
  
  
  23.  @return WKWebView 
    24. 
  
  
  
  
  24.  */ 
    25. 
  
  
  
  
  25. - (WKWebView *)getWKWebViewFromPool { 
    26. 
  
  
  
  
  26.     if (!self.preloadedViews.count) { 
    27. 
  
  
  
  
  27.         NSLog(@"不够啦！"); 
    28. 
  
  
  
  
  28.         return [self createPreloadedView]; 
    29. 
  
  
  
  
  29.     } else { 
    30. 
  
  
  
  
  30.         id preloadedView = self.preloadedViews.firstObject; 
    31. 
  
  
  
  
  31.         [self.preloadedViews removeObject:preloadedView]; 
    32. 
  
  
  
  
  32.         return preloadedView; 
    33. 
  
  
  
  
  33.     } 
    34. 
  
  
  
  
  34. } 
    35.
  • 创建 webview 的方法如下,需要注意的是 kWKWebViewReuseScheme，WKWebView 需要注册这个 scheme 才能实现拦截，这个是 WKWebview 拦截需要的准备工作。
  • SDICustomURLSchemeHandler 是我的自定义拦截类

关于这里的版本为什么设置成 iOS 12 以上，WKURLSchemeHandler 是苹果 iOS 11 就已推出，但是有发现某款机型在 iOS 11.2 上拦截失效，导致产生 Webview 白屏。所以这里一刀切，直接 12 以上才处理。其实 iOS 12 一下的用户量特别少，所以不需要太担心。

 
 
 
 
    
  
  
  
  
  1. //scheme定义 
    2. 
  
  
  
  
  2. #define kWKWebViewReuseScheme    @"kwebview" 
    3. 
  
  
  
  
  3.  
    4. 
  
  
  
  
  4. /** 
    5. 
  
  
  
  
  5.  创建一个WKWebView 
    6. 
  
  
  
  
  6.  @return WKWebView 
    7. 
  
  
  
  
  7.  */ 
    8. 
  
  
  
  
  8. - (WKWebView *)createPreloadedView { 
    9. 
  
  
  
  
  9.       WKUserContentController *userContentController = WKUserContentController.new; 
    10. 
  
  
  
  
  10.      WKWebViewConfiguration *configuration = [[WKWebViewConfiguration alloc] init]; 
    11. 
  
  
  
  
  11.       NSString *cookieSource = [NSString stringWithFormat:@"document.cookie = 'API_SESSION=%@';",  [SAMKeychain usertoken]]; 
    12. 
  
  
  
  
  12.       WKUserScript *cookieScript = [[WKUserScript alloc] initWithSource:cookieSource injectionTime:WKUserScriptInjectionTimeAtDocumentStart forMainFrameOnly:NO]; 
    13. 
  
  
  
  
  13.       [userContentController addUserScript:cookieScript]; 
    14. 
  
  
  
  
  14.      // 赋值userContentController 
    15. 
  
  
  
  
  15.      configuration.userContentController = userContentController; 
    16. 
  
  
  
  
  16.      configuration.preferences.javaScriptEnabled = YES; 
    17. 
  
  
  
  
  17.      configuration.suppressesIncrementalRendering = YES; // 是否支持记忆读取 
    18. 
  
  
  
  
  18.      [configuration.preferences setValue:@YES forKey:@"allowFileAccessFromFileURLs"];//支持跨域 
    19. 
  
  
  
  
  19. //    WKWebViewConfiguration *wkWebConfig = [[WKWebViewConfiguration alloc] init]; 
    20. 
  
  
  
  
  20. //    WKUserContentController *wkUController = [[WKUserContentController alloc] init]; 
    21. 
  
  
  
  
  21. //    wkWebConfig.userContentController = wkUController; 
    22. 
  
  
  
  
  22.  
    23. 
  
  
  
  
  23.     if (@available(iOS 12.0, *)) { 
    24. 
  
  
  
  
  24.         [configuration setURLSchemeHandler:[[SDICustomURLSchemeHandler alloc] init] forURLScheme:kWKWebViewReuseScheme]; 
    25. 
  
  
  
  
  25.     } else { 
    26. 
  
  
  
  
  26.         // Fallback on earlier versions 
    27. 
  
  
  
  
  27.     } 
    28. 
  
  
  
  
  28.     WKWebView *wkWebView = [[WKWebView alloc]initWithFrame:CGRectZero configuration:configuration]; 
    29. 
  
  
  
  
  29.     //根据自己的业务 
    30. 
  
  
  
  
  30.     wkWebView.allowsBackForwardNavigationGestures = YES; 
    31. 
  
  
  
  
  31.     return wkWebView; 
    32. 
  
  
  
  
  32. } 
    33.

替换 url scheme

 
 
 
 
    
  
  
  
  
  1. if (@available(iOS 12.0, *)) { 
    2. 
  
  
  
  
  2.     if([urlString hasPrefix:@"http"] && [urlString containsString:@"ui-h5"]){ 
    3. 
  
  
  
  
  3.         urlString = [urlString stringByReplacingOccurrencesOfString:@"https" withString:kWKWebViewReuseScheme]; 
    4. 
  
  
  
  
  4.     } 
    5. 
  
  
  
  
  5. } 
    6.

这里是通过规则直接把 https 替换为 kWKWebViewReuseScheme,也就是替换 url scheme http(s) 为自定义协议，完成这一步后，拦截生效。

需要注意的有两点:

  • 前端这边加载 js 等资源都是用相对路径，前端的 ajax 请求，像 post 请求，scheme 使用 http(s) 不使用自定义协议，这样native 不会拦截，完全交给 H5 与服务器交互，就不会发生发送 post 请求，body 丢失的情况。
  • 在我的项目里，H5 对服务器的请求都是通过 native 端来转发的，所以也不存在拦截 post 请求，body 丢失的情况。所以上面这样的改动对 H5 端是无侵入式的，不需要修改业务代码。

最最重要的自定义 SDICustomURLSchemeHandler 类

 
 
 
 
    
  
  
  
  
  1. - (void)webView:(WKWebView *)webView startURLSchemeTask:(id )urlSchemeTask 
    2. 
  
  
  
  
  2. API_AVAILABLE(ios(12.0)){ 
    3. 
  
  
  
  
  3.     dispatch_sync(self.serialQueue, ^{ 
    4. 
  
  
  
  
  4.         [_taskVaildDic setValue:@(YES) forKey:urlSchemeTask.description]; 
    5. 
  
  
  
  
  5.     }); 
    6. 
  
  
  
  
  6.      
    7. 
  
  
  
  
  7.     NSDictionary *headers = urlSchemeTask.request.allHTTPHeaderFields; 
    8. 
  
  
  
  
  8.     NSString *accept = headers[@"Accept"]; 
    9. 
  
  
  
  
  9.      
    10. 
  
  
  
  
  10.     //当前的requestUrl的scheme都是customScheme 
    11. 
  
  
  
  
  11.     NSString *requestUrl = urlSchemeTask.request.URL.absoluteString; 
    12. 
  
  
  
  
  12.     NSString *fileName = [[requestUrl componentsSeparatedByString:@"?"].firstObject componentsSeparatedByString:@"ui-h5/"].lastObject; 
    13. 
  
  
  
  
  13.     NSString *replacedStr = [requestUrl stringByReplacingOccurrencesOfString:kWKWebViewReuseScheme withString:@"https"]; 
    14. 
  
  
  
  
  14.     self.replacedStr = replacedStr; 
    15. 
  
  
  
  
  15.     //Intercept and load local resources. 
    16. 
  
  
  
  
  16.     if ((accept.length >= @"text".length && [accept rangeOfString:@"text/html"].location != NSNotFound)) {//html 拦截 
    17. 
  
  
  
  
  17.         [self loadLocalFile:fileName urlSchemeTask:urlSchemeTask]; 
    18. 
  
  
  
  
  18.     } else if ([self isMatchingRegularExpressionPattern:@"\\.(js|css)" text:requestUrl]) {//js、css 
    19. 
  
  
  
  
  19.         [self loadLocalFile:fileName urlSchemeTask:urlSchemeTask]; 
    20. 
  
  
  
  
  20.     } else if (accept.length >= @"image".length && [accept rangeOfString:@"image"].location != NSNotFound) {//image 
    21. 
  
  
  
  
  21.       NSString *key = [[SDWebImageManager sharedManager] cacheKeyForURL:[NSURL URLWithString:replacedStr]]; 
    22. 
  
  
  
  
  22.         [[SDWebImageManager sharedManager].imageCache queryImageForKey:key options:SDWebImageRetryFailed context:nil completion:^(UIImage * _Nullable image, NSData * _Nullable data, SDImageCacheType cacheType) { 
    23. 
  
  
  
  
  23.             if (image) { 
    24. 
  
  
  
  
  24.                 NSData *imgData = UIImageJPEGRepresentation(image, 1); 
    25. 
  
  
  
  
  25.                 NSString *mimeType = [self getMIMETypeWithCAPIAtFilePath:fileName] ?: @"image/jpeg"; 
    26. 
  
  
  
  
  26.                 [self resendRequestWithUrlSchemeTask:urlSchemeTask mimeType:mimeType requestData:imgData]; 
    27. 
  
  
  
  
  27.             } else { 
    28. 
  
  
  
  
  28.                 [self loadLocalFile:fileName urlSchemeTask:urlSchemeTask]; 
    29. 
  
  
  
  
  29.             } 
    30. 
  
  
  
  
  30.         }]; 
    31. 
  
  
  
  
  31.     } else { 
    32. 
  
  
  
  
  32.         //return an empty json. 
    33. 
  
  
  
  
  33.         NSData *data = [NSJSONSerialization dataWithJSONObject:@{ } options:NSJSONWritingPrettyPrinted error:nil]; 
    34. 
  
  
  
  
  34.         [self resendRequestWithUrlSchemeTask:urlSchemeTask mimeType:@"text/html" requestData:data]; 
    35. 
  
  
  
  
  35.     } 
    36. 
  
  
  
  
  36. } 
    37. 
  
  
  
  
  37.  
    38. 
  
  
  
  
  38. -(BOOL)isMatchingRegularExpressionPattern:(NSString *)pattern text:(NSString *)text{ 
    39. 
  
  
  
  
  39.     NSError *error = NULL; 
    40. 
  
  
  
  
  40.     NSRegularExpression *regex = [NSRegularExpression regularExpressionWithPattern:pattern options:NSRegularExpressionCaseInsensitive error:&error]; 
    41. 
  
  
  
  
  41.     NSTextCheckingResult *result = [regex firstMatchInString:text options:0 range:NSMakeRange(0, [text length])]; 
    42. 
  
  
  
  
  42.     return MHObjectIsNil(result)?NO:YES; 
    43. 
  
  
  
  
  43. } 
    44.
  • 上面的代码是拦截资源请求后的处理代码。收到拦截请求后，先获取本地资源包对应的资源，转换成 data 回传给 webView 进行渲染处理;若本地没有，则 customScheme 替换成 https 的 url 重发请求通知 webview，这就是基本流程。
  • 以下就是加载本地资源和重发请求的代码
 
 
 
 
    
  
  
  
  
  1.   //Load local resources, eg: html、js、css... 
    2. 
  
  
  
  
  2. - (void)loadLocalFile:(NSString *)fileName urlSchemeTask:(id )urlSchemeTask API_AVAILABLE(ios(11.0)){ 
    3. 
  
  
  
  
  3.     if(![self->_taskVaildDic boolValueForKey:urlSchemeTask.description default:NO] || !urlSchemeTask || fileName.length == 0){ 
    4. 
  
  
  
  
  4.                    return; 
    5. 
  
  
  
  
  5.     } 
    6. 
  
  
  
  
  6.      
    7. 
  
  
  
  
  7.     NSString * docsdir = [NSSearchPathForDirectoriesInDomains(NSDocumentDirectory, NSUserDomainMask, YES) objectAtIndex:0]; 
    8. 
  
  
  
  
  8.     NSString * H5FilePath = [[docsdir stringByAppendingPathComponent:@"H5"] stringByAppendingPathComponent:@"h5"]; 
    9. 
  
  
  
  
  9.     //If the resource do not exist, re-send request by replacing to http(s). 
    10. 
  
  
  
  
  10.     NSString *filePath = [H5FilePath stringByAppendingPathComponent:fileName]; 
    11. 
  
  
  
  
  11.      
    12. 
  
  
  
  
  12.     if (![[NSFileManager defaultManager] fileExistsAtPath:filePath]) { 
    13. 
  
  
  
  
  13.         NSLog(@"开始重新发送网络请求"); 
    14. 
  
  
  
  
  14.         if ([self.replacedStr hasPrefix:kWKWebViewReuseScheme]) { 
    15. 
  
  
  
  
  15.  
    16. 
  
  
  
  
  16.             self.replacedStr =[self.replacedStr stringByReplacingOccurrencesOfString:kWKWebViewReuseScheme withString:@"https"]; 
    17. 
  
  
  
  
  17.                      
    18. 
  
  
  
  
  18.             NSLog(@"请求地址:%@",self.replacedStr); 
    19. 
  
  
  
  
  19.              
    20. 
  
  
  
  
  20.         } 
    21. 
  
  
  
  
  21.      
    22. 
  
  
  
  
  22.         self.replacedStr = [NSString stringWithFormat:@"%@?%@",self.replacedStr,[SAMKeychain h5Version]?:@""]; 
    23. 
  
  
  
  
  23.         start = CACurrentMediaTime();//开始加载时间 
    24. 
  
  
  
  
  24.         NSLog(@"web请求开始地址:%@",self.replacedStr); 
    25. 
  
  
  
  
  25.          
    26. 
  
  
  
  
  26.         @weakify(self) 
    27. 
  
  
  
  
  27.         NSMutableURLRequest *request = [NSMutableURLRequest requestWithURL:[NSURL URLWithString:self.replacedStr]]; 
    28. 
  
  
  
  
  28.         NSURLSession *session = [NSURLSession sessionWithConfiguration:[NSURLSessionConfiguration defaultSessionConfiguration]]; 
    29. 
  
  
  
  
  29.         NSURLSessionDataTask *dataTask = [session dataTaskWithRequest:request completionHandler:^(NSData * _Nullable data, NSURLResponse * _Nullable response, NSError * _Nullable error) { 
    30. 
  
  
  
  
  30.             @strongify(self) 
    31. 
  
  
  
  
  31.             if([self->_taskVaildDic boolValueForKey:urlSchemeTask.description default:NO] == NO || !urlSchemeTask){ 
    32. 
  
  
  
  
  32.                 return; 
    33. 
  
  
  
  
  33.             } 
    34. 
  
  
  
  
  34.             [urlSchemeTask didReceiveResponse:response]; 
    35. 
  
  
  
  
  35.             [urlSchemeTask didReceiveData:data]; 
    36. 
  
  
  
  
  36.             if (error) { 
    37. 
  
  
  
  
  37.                 [urlSchemeTask didFailWithError:error]; 
    38. 
  
  
  
  
  38.             } else { 
    39. 
  
  
  
  
  39.                 NSTimeInterval delta = CACurrentMediaTime() - self->start; 
    40. 
  
  
  
  
  40.                 NSLog(@"=======web请求结束地址%@：：：%f", self.replacedStr, delta); 
    41. 
  
  
  
  
  41.                 [urlSchemeTask didFinish]; 
    42. 
  
  
  
  
  42.             } 
    43. 
  
  
  
  
  43.         }]; 
    44. 
  
  
  
  
  44.         [dataTask resume]; 
    45. 
  
  
  
  
  45.         [session finishTasksAndInvalidate]; 
    46. 
  
  
  
  
  46.     } else { 
    47. 
  
  
  
  
  47.         NSLog(@"filePath:%@",filePath); 
    48. 
  
  
  
  
  48.         if(![self->_taskVaildDic boolValueForKey:urlSchemeTask.description default:NO] || !urlSchemeTask || fileName.length == 0){ 
    49. 
  
  
  
  
  49.             NSLog(@"return"); 
    50. 
  
  
  
  
  50.             return; 
    51. 
  
  
  
  
  51.         } 
    52. 
  
  
  
  
  52.          
    53. 
  
  
  
  
  53.         NSData *data = [NSData dataWithContentsOfFile:filePath options:NSDataReadingMappedIfSafe error:nil]; 
    54. 
  
  
  
  
  54.         [self resendRequestWithUrlSchemeTask:urlSchemeTask mimeType:[self getMIMETypeWithCAPIAtFilePath:filePath] requestData:data]; 
    55. 
  
  
  
  
  55.     } 
    56. 
  
  
  
  
  56. } 
    57. 
  
  
  
  
  57.  
    58. 
  
  
  
  
  58. - (void)resendRequestWithUrlSchemeTask:(id )urlSchemeTask 
    59. 
  
  
  
  
  59.                               mimeType:(NSString *)mimeType 
    60. 
  
  
  
  
  60.                            requestData:(NSData *)requestData  API_AVAILABLE(ios(11.0)) { 
    61. 
  
  
  
  
  61.     if(![self->_taskVaildDic boolValueForKey:urlSchemeTask.description default:NO] || !urlSchemeTask|| !urlSchemeTask.request || !urlSchemeTask.request.URL){ 
    62. 
  
  
  
  
  62.         return; 
    63. 
  
  
  
  
  63.     } 
    64. 
  
  
  
  
  64.  
    65. 
  
  
  
  
  65.     NSString *mimeType_local = mimeType ? mimeType : @"text/html"; 
    66. 
  
  
  
  
  66.     NSData *data = requestData ? requestData : [NSData data]; 
    67. 
  
  
  
  
  67.     NSURLResponse *response = [[NSURLResponse alloc] initWithURL:urlSchemeTask.request.URL 
    68. 
  
  
  
  
  68.                                                         MIMEType:mimeType_local 
    69. 
  
  
  
  
  69.                                            expectedContentLength:data.length 
    70. 
  
  
  
  
  70.                                                 textEncodingName:nil]; 
    71. 
  
  
  
  
  71.     [urlSchemeTask didReceiveResponse:response]; 
    72. 
  
  
  
  
  72.     [urlSchemeTask didReceiveData:data]; 
    73. 
  
  
  
  
  73.     [urlSchemeTask didFinish]; 
    74. 
  
  
  
  
  74. } 
    75.

整个过程中遇到的一些踩坑点

1. 'The task has already been stopped'崩溃问题

  • _taskVaildDic 是一个 NSMutableDictionary，它里面存的是以当前的 urlSchemeTask做 key，拦截开始时设置 YES，收到停止通知时设置 NO。这是由于在快速切换 webview 时，之前的 urlSchemeTask 已经停止但是后面再次调用了它的方法就会产生该崩溃。
  • 在实际使用过程中，用 bugly 监控到还是会有该崩溃发生，只不过次数特别少，一天约四五条左右。还在寻找问题的原因中。
 
 
 
 
    
  
  
  
  
  1. - (void)webView:(WKWebView *)webView startURLSchemeTask:(id )urlSchemeTask 
    2. 
  
  
  
  
  2. API_AVAILABLE(ios(12.0)){ 
    3. 
  
  
  
  
  3.     dispatch_sync(self.serialQueue, ^{ 
    4. 
  
  
  
  
  4.         [_taskVaildDic setValue:@(YES) forKey:urlSchemeTask.description]; 
    5. 
  
  
  
  
  5.     }); 
    6. 
  
  
  
  
  6. } 
    7. 
  
  
  
  
  7.  
    8. 
  
  
  
  
  8. - (void)webView:(nonnull WKWebView *)webView stopURLSchemeTask:(nonnull id)urlSchemeTask  API_AVAILABLE(ios(12.0)){ 
    9. 
  
  
  
  
  9.     NSError *error = [NSError errorWithDomain:urlSchemeTask.request.URL.absoluteString code:0 userInfo:NULL]; 
    10. 
  
  
  
  
  10.     NSLog(@"weberror:%@",error); 
    11. 
  
  
  
  
  11.     dispatch_sync(self.serialQueue, ^{ 
    12. 
  
  
  
  
  12.          [self->_taskVaildDic setValue:@(NO) forKey:urlSchemeTask.description]; 
    13. 
  
  
  
  
  13.     }); 
    14. 
  
  
  
  
  14. } 
    15.

2. WKWebview 的默认缓存策略问题

之前未考虑到 WKWebview 的默认缓存策略(WKWebView 默认缓存策略完全遵循 HTTP 缓存协议)。

在 h5 打包上线并更新离线包后，H5 的资源文件修改是变更 md5 文件名的。由于缓存策略默认时间是一个小时，会导致缓存的 url 加载不到修改后的 js，css 等文件(无论是本地离线包和远端服务器都已经没有这个 md5 文件)。

简单的解决方案是通过资源链接加版本号后缀，每次更新资源的时候变更版本号，在上面的代码中有做这部分处理。既保证了实时的更新，又保证了加载速度。

3. uni-app 图片 CDN 问题

做完上述的离线包优化后，发现新下载 APP 的情况，会偶发加载很慢问题。iOS 出现，但是 android 并未出现。

H5 部分是用 uni-app 开发的，所以发现这个问题后由前端同事修复后恢复正常。

4. chunk-vendors.js 文件过大

这个问题也是抓包发现的，在未打开离线包缓存开关时，发现h5的加载速度过慢，发现加载的 chunk-vendors.js 文件过大约 1.7M。 stopURLSchemeTask 方法里会报 error 错误信息 Error Domain= 的错误信息。也由前端同事处理了这个问题。

最终效果

统计了 APP 在不开离线包方案时，webview 平均加载时长在 1.5-2 秒的范围内(这里是计算的 webview开始加载到导航完成的时间)，在上述优化完成后，打开的时长在 0.25-0.3 秒之间。

所以效果还是很显著的，用户的直观感受就是接近于秒开的体验。

总结

上面的优化过程中踩了很多坑，但是也重新梳理了 Webview 的加载过程，默认缓存策略机制等内容。上面的方案肯定不是最优的，只是一个快速达到 WKWebview 接近秒开效果的一个方案。 

有什么更好的解决方案或者上述文中有不对的地方，希望大家指出，欢迎共同讨论~

网站标题：WKWebview秒开的实践及踩坑之路
文章出自：http://www.csdahua.cn/qtweb/news26/417926.html

网站建设、网络推广公司-快上网，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 快上网

成都快上网为您推荐相关内容

网站导航知识

行业网站建设

广安网站建设　　 　中国电信成都枢纽中心　　 　域名注册　　 　网络推广外包　　 　成都营销网站建设　　 　成都网络公司　　 　百度推广公司　　 　域名注册　　 　成都网站建设　　 　app开发　　 　南充护栏钻孔机　　 　成都网站制作公司　　 　成都小程序开发　　 　贵阳联通机房　　 　企业网站建设公司　　 　航空文化传媒　　 　重庆建站　　 　成都光华机房服务器托管　　 　发光字制作　　 　橡塑保温管