快捷導(dǎo)航

iOS WKWebview 白屏檢測實現(xiàn)的示例

更新時間：2020年10月20日 11:48:12 作者：BBTIME

這篇文章主要介紹了iOS WKWebview 白屏檢測實現(xiàn)的示例，幫助大家更好的進(jìn)行ios開發(fā)，感興趣的朋友可以了解下

前言

自ios8推出wkwebview以來，極大改善了網(wǎng)頁加載速度及內(nèi)存泄漏問題，逐漸全面取代笨重的UIWebview。盡管高性能、高刷新的WKWebview在混合開發(fā)中大放異彩表現(xiàn)優(yōu)異，但加載網(wǎng)頁過程中出現(xiàn)異常白屏的現(xiàn)象卻仍然屢見不鮮，且現(xiàn)有的api協(xié)議處理捕捉不到這種異常case，造成用戶無用等待體驗很差。
針對業(yè)務(wù)場景需求，實現(xiàn)加載白屏檢測。考慮采用字節(jié)跳動團(tuán)隊提出的webview優(yōu)化技術(shù)方案。在合適的加載時機(jī)對當(dāng)前webview可視區(qū)域截圖，并對此快照進(jìn)行像素點遍歷，如果非白屏顏色的像素點超過一定的閾值，認(rèn)定其為非白屏，反之重新加載請求。

獲取快照

ios官方提供了簡易的獲取webview快照接口，通過異步回調(diào)拿到當(dāng)前可視區(qū)域的屏幕截圖。

- (void)takeSnapshotWithConfiguration:(nullable WKSnapshotConfiguration *)snapshotConfiguration completionHandler:(void (^)(UIImage * _Nullable snapshotImage, NSError * _Nullable error))completionHandler API_AVAILABLE(ios(11.0));

其中snapshotConfiguration 參數(shù)可用于配置快照大小范圍，默認(rèn)截取當(dāng)前客戶端整個屏幕區(qū)域。由于可能出現(xiàn)導(dǎo)航欄成功加載而內(nèi)容頁卻空白的特殊情況，導(dǎo)致非白屏像素點數(shù)增加對最終判定結(jié)果造成影響，考慮將其剔除。

- (void)judgeLoadingStatus:(WKWebView *)webview {
  if (@available(iOS 11.0, *)) {
    if (webView && [webView isKindOfClass:[WKWebView class]]) {

      CGFloat statusBarHeight = [[UIApplication sharedApplication] statusBarFrame].size.height; //狀態(tài)欄高度
      CGFloat navigationHeight = webView.viewController.navigationController.navigationBar.frame.size.height; //導(dǎo)航欄高度
      WKSnapshotConfiguration *shotConfiguration = [[WKSnapshotConfiguration alloc] init];
      shotConfiguration.rect = CGRectMake(0, statusBarHeight + navigationHeight, _webView.bounds.size.width, (_webView.bounds.size.height - navigationHeight - statusBarHeight)); //僅截圖檢測導(dǎo)航欄以下部分內(nèi)容
      [_webView takeSnapshotWithConfiguration:shotConfiguration completionHandler:^(UIImage * _Nullable snapshotImage, NSError * _Nullable error) {
        //todo
      }];
    }
  }
}

縮放快照

為了提升檢測性能，考慮將快照縮放至1/5，減少像素點總數(shù)，從而加快遍歷速度。

- (UIImage *)scaleImage: (UIImage *)image {
  CGFloat scale = 0.2;
  CGSize newsize;
  newsize.width = floor(image.size.width * scale);
  newsize.height = floor(image.size.height * scale);
  if (@available(iOS 10.0, *)) {
    UIGraphicsImageRenderer * renderer = [[UIGraphicsImageRenderer alloc] initWithSize:newsize];
     return [renderer imageWithActions:^(UIGraphicsImageRendererContext * _Nonnull rendererContext) {
            [image drawInRect:CGRectMake(0, 0, newsize.width, newsize.height)];
         }];
  }else{
    return image;
  }
}

縮小前后性能對比（實驗環(huán)境：iPhone11同一頁面下）：

縮放前白屏檢測：

耗時20ms

縮放后白屏檢測：

耗時13ms

注意這里有個小坑。由于縮略圖的尺寸在原圖寬高*縮放系數(shù)后可能不是整數(shù)，在布置畫布重繪時默認(rèn)向上取整，這就造成畫布比實際縮略圖大（混蛋啊摔?。?。在遍歷縮略圖像素時，會將圖外畫布上的像素納入考慮范圍，導(dǎo)致實際白屏頁像素占比并非100% 如圖所示。因此使用floor將其尺寸大小向下取整。

遍歷快照

遍歷快照縮略圖像素點，對白色像素(R:255 G: 255 B: 255)占比大于95%的頁面，認(rèn)定其為白屏。

- (BOOL)searchEveryPixel:(UIImage *)image {
  CGImageRef cgImage = [image CGImage];
  size_t width = CGImageGetWidth(cgImage);
  size_t height = CGImageGetHeight(cgImage);
  size_t bytesPerRow = CGImageGetBytesPerRow(cgImage); //每個像素點包含r g b a 四個字節(jié)
  size_t bitsPerPixel = CGImageGetBitsPerPixel(cgImage);

  CGDataProviderRef dataProvider = CGImageGetDataProvider(cgImage);
  CFDataRef data = CGDataProviderCopyData(dataProvider);
  UInt8 * buffer = (UInt8*)CFDataGetBytePtr(data);

  int whiteCount = 0;
  int totalCount = 0;

  for (int j = 0; j < height; j ++ ) {
    for (int i = 0; i < width; i ++) {
      UInt8 * pt = buffer + j * bytesPerRow + i * (bitsPerPixel / 8);
      UInt8 red  = * pt;
      UInt8 green = *(pt + 1);
      UInt8 blue = *(pt + 2);
//      UInt8 alpha = *(pt + 3);

      totalCount ++;
      if (red == 255 && green == 255 && blue == 255) {
        whiteCount ++;
      }
    }
  }
  float proportion = (float)whiteCount / totalCount ;
  NSLog(@"當(dāng)前像素點數(shù)：%d,白色像素點數(shù):%d , 占比: %f",totalCount , whiteCount , proportion );
  if (proportion > 0.95) {
    return YES;
  }else{
    return NO;
  }
}

總結(jié)

typedef NS_ENUM(NSUInteger,webviewLoadingStatus) {

  WebViewNormalStatus = 0, //正常

  WebViewErrorStatus, //白屏

  WebViewPendStatus, //待決
};

// 判斷是否白屏
- (void)judgeLoadingStatus:(WKWebview *)webview withBlock:(void (^)(webviewLoadingStatus status))completionBlock{
  webviewLoadingStatus __block status = WebViewPendStatus;
  if (@available(iOS 11.0, *)) {
    if (webview && [webview isKindOfClass:[WKWebView class]]) {

      CGFloat statusBarHeight = [[UIApplication sharedApplication] statusBarFrame].size.height; //狀態(tài)欄高度
      CGFloat navigationHeight = webview.viewController.navigationController.navigationBar.frame.size.height; //導(dǎo)航欄高度
      WKSnapshotConfiguration *shotConfiguration = [[WKSnapshotConfiguration alloc] init];
      shotConfiguration.rect = CGRectMake(0, statusBarHeight + navigationHeight, webview.bounds.size.width, (webview.bounds.size.height - navigationHeight - statusBarHeight)); //僅截圖檢測導(dǎo)航欄以下部分內(nèi)容
      [webview takeSnapshotWithConfiguration:shotConfiguration completionHandler:^(UIImage * _Nullable snapshotImage, NSError * _Nullable error) {
        if (snapshotImage) {
          CGImageRef imageRef = snapshotImage.CGImage;
          UIImage * scaleImage = [self scaleImage:snapshotImage];
          BOOL isWhiteScreen = [self searchEveryPixel:scaleImage];
          if (isWhiteScreen) {
            status = WebViewErrorStatus;
          }else{
            status = WebViewNormalStatus;
          }
        }
        if (completionBlock) {
          completionBlock(status);
        }
      }];
    }
  }
}

// 遍歷像素點 白色像素占比大于95%認(rèn)定為白屏
- (BOOL)searchEveryPixel:(UIImage *)image {
  CGImageRef cgImage = [image CGImage];
  size_t width = CGImageGetWidth(cgImage);
  size_t height = CGImageGetHeight(cgImage);
  size_t bytesPerRow = CGImageGetBytesPerRow(cgImage); //每個像素點包含r g b a 四個字節(jié)
  size_t bitsPerPixel = CGImageGetBitsPerPixel(cgImage);

  CGDataProviderRef dataProvider = CGImageGetDataProvider(cgImage);
  CFDataRef data = CGDataProviderCopyData(dataProvider);
  UInt8 * buffer = (UInt8*)CFDataGetBytePtr(data);

  int whiteCount = 0;
  int totalCount = 0;

  for (int j = 0; j < height; j ++ ) {
    for (int i = 0; i < width; i ++) {
      UInt8 * pt = buffer + j * bytesPerRow + i * (bitsPerPixel / 8);
      UInt8 red  = * pt;
      UInt8 green = *(pt + 1);
      UInt8 blue = *(pt + 2);
//      UInt8 alpha = *(pt + 3);

      totalCount ++;
      if (red == 255 && green == 255 && blue == 255) {
        whiteCount ++;
      }
    }
  }
  float proportion = (float)whiteCount / totalCount ;
  NSLog(@"當(dāng)前像素點數(shù)：%d,白色像素點數(shù):%d , 占比: %f",totalCount , whiteCount , proportion );
  if (proportion > 0.95) {
    return YES;
  }else{
    return NO;
  }
}

//縮放圖片
- (UIImage *)scaleImage: (UIImage *)image {
  CGFloat scale = 0.2;
  CGSize newsize;
  newsize.width = floor(image.size.width * scale);
  newsize.height = floor(image.size.height * scale);
  if (@available(iOS 10.0, *)) {
    UIGraphicsImageRenderer * renderer = [[UIGraphicsImageRenderer alloc] initWithSize:newsize];
     return [renderer imageWithActions:^(UIGraphicsImageRendererContext * _Nonnull rendererContext) {
            [image drawInRect:CGRectMake(0, 0, newsize.width, newsize.height)];
         }];
  }else{
    return image;
  }
}

僅需在合適的view生命周期內(nèi)回調(diào)使用該函數(shù)方法即可檢測出頁面狀態(tài)是否白屏，且性能損耗可忽略不計。

聲明