WKWebView梳理

WKWebView 是苹果在 WWDC 2014 上推出的新一代 webView 组件,用以替代 UIKit 中笨重难用、内存泄漏的 UIWebView。WKWebView 拥有60fps滚动刷新率、和 safari 相同的 JavaScript 引擎等优势。

1. UIWebView 和 WKWebView 的区别


  • UIWebView使用UIKit框架,而WKWebView使用WebKit.framework。WKWebView采用与Safari 相同的 Nitro JavaScript 引擎,在cpu资源消耗方面,远低于UIWebView。

  • WKWebView为多进程组件,会从App内存中分离内存到单独的进程(Network Process and Rendring Process)中。当内存超过了系统分配给WKWebView的内存时候,会导致WKWebView浏览器崩溃白屏,但是App不会Crash(app会收到系统通知,并且尝试去重新加载页面)。相反UIWebView是和app同一个进程,UIWebView加载页面占用的内存被计算为app内存占用的一部分,当app超过了系统分配的内存,则会被操作系统crash。在整个过程中,会经常收到iOS系统的通知用来防止app被系统kill,很多时候,这些通知并不及时,或者根本没有返回通知。

  • WKWebView是异步处理native与JavaScript之间的通信,所以执行速度会更快。

  • WKWevbView内存消耗较UIWebView大幅下降,WKWebView有着高达60fps的滚动刷新率以及内置手势,WKWevView更多的支持 HTML5 的特性,比如 IndexedDB 和 ObjectStore ArrayBuffer。

  • WKWevbView的Cookie存储体系与 UIWebVIew 完全不一样,需手动添加 Cookie,下文中会详细介绍。

  • WKWebView与 UIWebView 机制不同:加载过程中所有的请求都不经过 NSURLProtocol,也就是WKWebView无法拦截响应数据,下文中会详细介绍。

  • WKWebView 的loading、title、estimatedProgress三个属性支持KVO。

2. WKWebView为什么比UIWebView高效


二者都是基于 JavaScriptCore 实现,它是一个在WebKit中提供 JavaScript 引擎的框架,苹果称之为Nitro。WKWebView高效原因之一是支持JIT(Just In Time)技术,而UIWebView不支持。

扩展阅读:JavaScript引擎JIT工作原理Nitro、JavaScriptCore 和 JIT

3. WKWebView - API介绍


WKWebView - API梳理

4. WKWebView - Cookie


WKWebView - Cookie管理

5. WKWebView 白屏问题


WKWebView 白屏的原因在于 WebContent Process 的 crash,当 WKWebView 在单独进程占用较大内存时,就会导致白屏,此时 WKWebView.URL 会变成 nil,此时调用 reload 方法刷新已经失效。
解决方案
a. WKNavigtionDelegate 代理

- (void)webViewWebContentProcessDidTerminate:(WKWebView *)webView API_AVAILABLE(macosx(10.11), ios(9.0)) {
    [webView reload];
}

当 WKWebView 总体内存占用过大,页面即将白屏的时候,系统会调用上面的回调函数,我们在该函数里执行[webView reload](这个时候 webView.URL 取值尚不为 nil)解决白屏问题。在一些高内存消耗的页面可能会频繁刷新当前页面,H5侧也要做相应的适配操作。

b. 检测 webView.title 是否为空
并不是所有H5页面白屏的时候都会调用上面的回调函数,比如,在一个高内存消耗的H5页面上 present 系统相机,拍照完毕后返回原来页面的时候出现白屏现象(拍照过程消耗了大量内存,导致内存紧张,WebContent Process 被系统挂起),但上面的回调函数并没有被调用。在WKWebView白屏的时候,另一种现象是 webView.titile 会被置空, 因此,可以在 viewWillAppear 的时候检测 webView.title 是否为空来 reload 页面。

综合以上两种方法可以解决绝大多数的白屏问题。

6. Native 与 JS 交互

iOS WKWebView与JS交互:https://www.jianshu.com/p/4d12d593ba60

7.拦截网络请求 && 离线化

WKWebView - 拦截网络请求 && 离线化

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 为了更好的阅读体验,建议阅读原文插播广告 —— 几十行代码完成资讯类App多种形式内容页HybridPageKit...
    deqzhu阅读 4,545评论 0 10
  • 本文系Smallfan(程序猿小风扇)原创内容,转载请在文章开头显眼处注明作者和出处。 分析 在iPhone 6s...
    程序猿小风扇阅读 6,774评论 5 45
  • UIWebView从 iOS2 就有,iOS8 以后,WKWebView 是苹果在 WWDC 2014 上推出的新...
    LuisX阅读 9,865评论 3 7
  • 前言 关于UIWebView的介绍,相信看过上文的小伙伴们,已经大概清楚了吧,如果有问题,欢迎提问。 本文是本系列...
    CoderLF阅读 9,044评论 2 12
  • 本文参考资料:1.https://mp.weixin.qq.com/s/rhYKLIbXOsUJC_n6dt9Uf...
    周灬阅读 5,744评论 1 5