iOS-优雅理解WKWebView

一.背景介绍

UIWebView自iOS2就有，iOS8出现了WKWebView，毫无疑问WKWebView将逐步取代笨重的UIWebView。通过一些测试来看发现UIWebView占用过多内存，且内存峰值更是夸张。然而，新一代的WKWebView网页加载速度也有进一步的提升。

下面我简单的罗列一些优势：

更多的支持HTML5的特性
官方宣称的高达60fps的滚动刷新率以及内置手势
Safari相同的JavaScript引擎
将UIWebViewDelegate与UIWebView拆分成了14类与3个协议
另外用的比较多的，增加加载进度属性：estimatedProgress

官方文档说明

Demo地址

二.UIWebView简单说明

UIWebView使用不做详细介绍，他的功能不仅可以加载HTML页面，还支持pdf、word、txt、各种图片等等的显示。其中代理协议使用UIWebViewDelegate，另外补充一点就是关于JS交互

js执行OC代码：

js是不能执行oc代码的，但是可以变相的执行，js可以将要执行的操作封装到网络请求里面，然后oc拦截这个请求，获取url里面的字符串解析即可，这里用到代理协议的

 
  
  (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType函数。

oc调取写好的js代码


 // 实现自动定位js代码, htmlLocationID为定位的位置(由js开发人员给出)，实现自动定位代码，应该在网页加载完成之后再调用
 NSString *javascriptStr = [NSString stringWithFormat:@"window.location.href = '#%@'",htmlLocationID];
 // webview执行代码
 [self.webView stringByEvaluatingJavaScriptFromString:javascriptStr];
 // 获取网页的title
 NSString *title = [self.webView stringByEvaluatingJavaScriptFromString:@"document.title"]

三.WKWebView使用

基本使用

先导入：#import

以下代码展示了WKWebView简单显示


 //1.创建webView
 WKWebView *webView = [[WKWebView alloc] initWithFrame:self.view.bounds];
 //2.创建请求
 NSMutableURLRequest *request = [NSMutableURLRequest requestWithURL:[NSURL URLWithString:@"http://www.baidu.com"]];
 //3.加载请求
 [webView loadRequest:request];
 //4. 视图添加
 [self.view addSubview:webView];

实用函数

 
  
  (nullable WKNavigation *)loadFileURL:(NSURL *)URL allowingReadAccessToURL:(NSURL *)readAccessURL API_AVAILABLE(macosx(10.11), ios(9.0)); 
  (WKNavigation *)loadRequest:(NSURLRequest *)request; 
  (WKNavigation *)loadHTMLString:(NSString *)string baseURL:(nullable NSURL *)baseURL; 
  (WKNavigation *)loadData:(NSData *)data MIMEType:(NSString *)MIMEType characterEncodingName:(NSString *)characterEncodingName baseURL:(NSURL *)baseURL;

网页导航刷新相关函数

和UIWebview几乎一样，不同的是有返回值，WKNavigation(已更新)，另外增加了函数reloadFromOrigin和goToBackForwardListItem。

reloadFromOrigin会比较网络数据是否有变化，没有变化则使用缓存，否则从新请求。
goToBackForwardListItem：比向前向后更强大，可以跳转到某个指定历史页面


 @property (nonatomic, readonly) BOOL canGoBack;
 @property (nonatomic, readonly) BOOL canGoForward; 
  
  (WKNavigation *)goBack; 
  (WKNavigation *)goForward; 
  (WKNavigation *)reload; 
  (WKNavigation *)reloadFromOrigin; // 增加的函数 
  (WKNavigation *)goToBackForwardListItem:(WKBackForwardListItem *)item; // 增加的函数 
  (void)stopLoading;

代理协议

WKNavigationDelegate

该代理提供的方法，可以用来追踪加载过程（页面开始加载、加载完成、加载失败）、决定是否执行跳转。


 // 2.页面开始加载时调用 
  
  (void)webView:(WKWebView *)webView didStartProvisionalNavigation:(WKNavigation *)navigation;
 //3. 当内容开始返回时调用 
  (void)webView:(WKWebView *)webView didCommitNavigation:(WKNavigation *)navigation;
 // 4.页面加载完成之后调用 
  (void)webView:(WKWebView *)webView didFinishNavigation:(WKNavigation *)navigation;
 // 页面加载失败时调用 
  (void)webView:(WKWebView *)webView didFailProvisionalNavigation:(WKNavigation *)navigation;

页面跳转的代理方法有三种，分为（收到跳转与决定是否跳转两种）


 // 接收到服务器跳转请求之后调用 
  
  (void)webView:(WKWebView *)webView didReceiveServerRedirectForProvisionalNavigation:(WKNavigation *)navigation;
 // 3.在收到响应后，决定是否跳转 
  (void)webView:(WKWebView *)webView decidePolicyForNavigationResponse:(WKNavigationResponse *)navigationResponse decisionHandler:(void (^)(WKNavigationResponsePolicy))decisionHandler;
 // 1.在发送请求之前，决定是否跳转 
  (void)webView:(WKWebView *)webView decidePolicyForNavigationAction:(WKNavigationAction *)navigationAction decisionHandler:(void (^)(WKNavigationActionPolicy))decisionHandler;

数字表示了正确加载时的调用顺序

WKUIDelegate

UI界面相关，原生控件支持，三种提示框：输入、确认、警告。首先将web提示框拦截然后再做处理。


 /// 创建一个新的WebView 
  
  (WKWebView *)webView:(WKWebView *)webView createWebViewWithConfiguration:(WKWebViewConfiguration *)configuration forNavigationAction:(WKNavigationAction *)navigationAction windowFeatures:(WKWindowFeatures *)windowFeatures;
 /// 输入框 
  (void)webView:(WKWebView *)webView runJavaScriptTextInputPanelWithPrompt:(NSString *)prompt defaultText:(nullable NSString *)defaultText initiatedByFrame:(WKFrameInfo *)frame completionHandler:(void (^)(NSString * __nullable result))completionHandler;
 /// 确认框 
  (void)webView:(WKWebView *)webView runJavaScriptConfirmPanelWithMessage:(NSString *)message initiatedByFrame:(WKFrameInfo *)frame completionHandler:(void (^)(BOOL result))completionHandler;
 /// 警告框 
  (void)webView:(WKWebView *)webView runJavaScriptAlertPanelWithMessage:(NSString *)message initiatedByFrame:(WKFrameInfo *)frame completionHandler:(void (^)(void))completionHandler;

WKScriptMessageHandler
这个协议中包含一个必须实现的方法，这个方法是提高App与web端交互的关键，它可以直接将接收到的JS脚本转为OC或Swift对象。


 /// message: 收到的脚本信息. 
  
  (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message;

注意事项

1.线程不安全
来源于苹果文档


 Concurrency Note
 The WebKit framework is not thread-safe. If you call functions or methods in this framework, you must do so exclusively on the main program thread.

WKWebView应用

1. 修改docunment


 WKUserContentController *wkuserCVC = [[WKUserContentController alloc]init];
 WKUserScript *script = [[WKUserScript alloc]initWithSource:@"js code" injectionTime:WKUserScriptInjectionTimeAtDocumentStart forMainFrameOnly:YES];
 [wkuserCVC addUserScript:script];

2.监听web内容加载进度、是否加载完成

WKWebView 有一个属性estimatedProgress,这个就是加载进度。我们利用KVO监听这个属性值的变化，就可以显示加载进度了。


 [self.webview addObserver:self forKeyPath:@"estimatedProgress" options:NSKeyValueObservingOptionNew context:nil];

3. 跨域问题

跨域问题可以采用手动跳转的方式
在

 
  
  (void)webView:(WKWebView *)webView decidePolicyForNavigationAction:(WKNavigationAction *)navigationAction decisionHandler:(void (^)(WKNavigationActionPolicy))decisionHandler{
 //这里拦截判断
 }

补充：HTML5 性能数据了解

白屏时间

白屏时间无论安卓还是iOS在加载网页的时候都会存在的问题，也是目前无法解决的；

页面耗时

页面耗时指的是开始加载这个网页到整个页面load完成即渲染完成的时间；

加载链接的一些性能数据

重定向时间，DNS解析时间，TCP链接时间，request请求时间，response响应时间，dom节点解析时间，page渲染时间，同时我们还需要抓取资源时序数据，

什么是资源时序数据呢？

每个网页是有很多个资源组成的，有.js、.png、.css、.script等等，我们就需要将这些每个资源链接的耗时拿到，是什么类型的资源，完整链接；对于客户来说有了这些还不够，还需要JS错误，页面的ajax请求。JS错误获取的当然是堆栈信息和错误类型。ajax请求一般是获取三个时间，响应时间，ajax下载时间，ajax回调时间。