我们app从ReactNative转H5app,在开发过程中发现一个顽固性问题。点击H5的tabbar或者页面之间点击跳转会偶现白屏问题。或者app退到后台一段时间唤醒app会出现白屏。

白屏原因:

WKWebView是一个多进程组件,Network Loading以及UI Rendering在其它进程中执行。所以UIWebView上当内存占用太大的时候,App Process会crash;而在WKWebView上当总体的内存占用比较大的时候,WebContent Process会crash,从而出现白屏现象。这种一般是操作中交互点击内存过大可能会突然白屏,然后这种你查看图层还会看到界面UI,但是页面就是白屏。后台放置一段时间唤醒会白屏,这种感觉也是程序在内存中被销毁,打开白屏。查看图层会发现白屏的WebView的中缺少一个WKCompositingView视图(WKWebView的渲染单元,属于渲染进程)。目前白屏现象发现有这两种表象。

我们处理白屏方案:

方案一:后台放置一段时间唤醒会白屏

解决方式:退到后台再唤醒,我们native 超过10分钟会刷新,一是页面数据定时更新需要刷新,二是防止内存杀死白屏。但是仍然存在偶现白屏。

方案二:判断webView.titile

在白屏的时候,有些时候页面 webView.titile 会被置空,所有会在viewWillAppear判断标题为空的重新reload页面。

- (void)viewWillAppear:(BOOL)animated {

[super viewWillAppear:animated];

self.navigationController.navigationBar.hidden = true;

if (!self.isFirstLoad && StrIsEmpty(self.wkWebView.title)) {

[self.wkWebView loadRequest:[NSURLRequest requestWithURL:[NSURL URLWithString:Active_Path]]];

}

方案三:内层过大会执行webViewWebContentProcessDidTerminate进程终止方法

有些情况当日在web一直操作时会突然白屏,有的时候是因为内容过大导致程序终止。所以采用如下方法处理

// 此方法适用iOS9.0以上     iOS8用监听另行处理

- (void)webViewWebContentProcessDidTerminate:(WKWebView *)webView NS_AVAILABLE(10_11, 9_0){

NSLog(@"进程被终止");

[self loadActiveRequestWithUrl:Active_Path];

}

// 防止白屏,单web应用,后面路由切换不会加载

- (void)observeValueForKeyPath:(NSString *)keyPath ofObject:(id)object change:(NSDictionary *)change context:(void *)context {

if (object == self.wkWebView && [keyPath isEqualToString:@"URL"])

{

NSURL *newUrl = [change objectForKey:NSKeyValueChangeNewKey];

NSURL *oldUrl = [change objectForKey:NSKeyValueChangeOldKey];

if (ObjIsNilOrNull(newUrl) && !ObjIsNilOrNull(oldUrl)) {

[self loadActiveRequestWithUrl:Active_Path];

}

}

}

这三种方案基本解决了我项目里99%的白屏,复现几率很少。但是最近还遇到过2回白屏。最近逛简书发现还有一种方案。

补充方案:待验证

可以遍历WKWebView的subviews,通过是否包含WKCompositingView来判断是否白屏。按照网络方案,清缓存、reload和setNeedsLayout都不能解决白屏,所以只能回收旧webview(webview = nil 后记得清除代理,移除监听,要不然会crash)创建新的 webview, 然后重新request。

// 判断是否白屏

- (BOOL)isBlankView:(UIView*)view { // YES:blank

ClasswkCompositingView =NSClassFromString(@"WKCompositingView");

if ([viewisKindOfClass:[wkCompositingView class]]) {

returnNO;

}

for(UIView*subViewinview.subviews) {

if (![selfisBlankView:subView]) {

returnNO;

}

}

returnYES;

}

补充方案来源简书作者如下:
作者:zhoutq
链接:https://www.jianshu.com/p/de67f5a752b6

WKwebview 白屏问题——(WebApp/HybirdApp)相关推荐

  1. WKWebView白屏问题

    WKWebView白屏问题 WKWebView自诩拥有更多的加载速度,更低的内存占用,但实际上WKWebView是一个多进程组件,Network Loading以及UI Rendering在其他进程中 ...

  2. WKWebView 白屏问题

    1.WKWebView 自诩拥有更快的加载速度,更低的内存占用,但实际上 WKWebView 是一个多进程组件,Network Loading 以及 UI Rendering 在其它进程中执行.初次适 ...

  3. webview加载页面有2秒白屏_iOS WKWebview 白屏检测实现

    前言 自ios8推出wkwebview以来,极大改善了网页加载速度及内存泄漏问题,逐渐全面取代笨重的UIWebview.尽管高性能.高刷新的WKWebview在混合开发中大放异彩表现优异,但加载网页过 ...

  4. 深入理解WKWebView白屏

    白屏是webview进程终止之后的表现,在webview因异常使用内存.CPU等资源时,webkit会终止当前m页展示的进程,在用户端表现为白页. 第一.webview的进程被终止的原因有哪些? Pr ...

  5. iOS开发~WKWebView白屏适配

    WKWebView虽好,但白屏问题也很苦恼,下面分享一下自己解决问题的过程. 公司项目使用Cordova框架,做原生项目嵌入H5,业务复杂了以后,H5资源也越来越大,占用内存越来越多,加载也越来越慢, ...

  6. iOS WKWebView白屏检测演进方案记录

    网上查到的方案 typedef NS_ENUM(NSUInteger,webviewLoadingStatus) {WebViewNormalStatus = 0, //正常WebViewErrorS ...

  7. 前端白屏问题_小程序白屏问题和内存解决方法

    1 关于WKWebview白屏,网上罗列的常见原因大致有以下几种: 1.内存占用比较大时,WebContent Process 会 crash,从而出现白屏现象. 2.URL网址无效或者含有中文字符. ...

  8. uniapp 云打包后IOS白屏,真机调试也是白屏,没有报错!解决办法

    uniapp 云打包后IOS白屏,真机调试也是白屏,没有报错!解决办法! 原来用uniapp 写的小程序 然后要翻成app 一开始还是很顺利的,因为安卓端测试 没有什么大问题:但是IOS直接白屏,只能 ...

  9. wkwebview 在iOS10以下系统显示白屏问题

    打了测试环境的包,在iOS11系统上任何wkwebview界面显示都没有什么问题,但是到了iOS10的系统上,或者iOS9的系统上都显示白屏,遇到不配和你调试的H5,你想把他撕吧撕吧喂鹰的心都有了,但 ...

最新文章

  1. 学好机器学习必备这12条经验 !(附资料)
  2. android如何使用ios14组件,ios14小组件怎么添加 苹果ios14小组件添加使用教程
  3. centos8 改主题颜色 黑色改白色
  4. 软件包管理 rpm yum apt-get dpkg
  5. SAP Cloud for Customer UI Designer里如何消费Object Value Selector(OVS)
  6. Linux+.NetCore+Nginx搭建集群
  7. c语言 将url图片存到本地_python爬虫:爬取男生喜欢的图片
  8. 1709 - Index column size too large. The maximum column size is 767 bytes.
  9. Redis集群案例与场景分析
  10. 牛客练习赛20:A. 礼物(组合数学/小球与盒子问题)
  11. extremecomponents-1.0.1.jar 的使用小例子
  12. CodeQL代码安全扫描工具安装部署
  13. Linux必会的rpm命令安装软件
  14. 手机拍的视频后期怎么处理?视频大神的后期技巧,Vlog大片也能做
  15. android 混淆不起作用,Android代码混淆的写法总结
  16. libusb使用指南
  17. iOS 判断APP是否打开定位,并实现直接跳转打开定位
  18. 100万美金VS100美金FBI本可以在iPhone 5c解锁案中省下一大笔钱
  19. 服务器千兆网卡显示百兆,Cisco 2960交换机,服务器千兆网卡,显示百兆问题?...
  20. 中国十大最具影响力***

热门文章

  1. 微信小程序:自定义弹出层
  2. Easy3D开发——点云孔洞填充
  3. 亚马逊首席技术官:2023年及未来五大技术趋势预测 | 美通社头条
  4. keil创建工程没有atmel_keil创建工程步骤详解
  5. 使你的ActiveX控件执行时不弹出安全性提示
  6. 30天学会javase
  7. 车载传感器技术详解【 持续更新ing 】— 自动驾驶技术概述
  8. github创建仓库,Idea上传自己的项目到新创建的仓库中
  9. 那些酷炫的AI前沿应用 |〖医疗〗听声音辨新冠感染;〖农业〗除草机器人;〖救援〗无人机海上搜救;〖运动〗拳击比赛裁判;〖环保〗从废品中分拣可回收材料;〖招聘〗TaTiO招聘平台…
  10. 记录一下融云即时通讯IM