H5利用SDWebImage做图片缓存以及WKWebView的使用

写这篇文章的原因是公司有一个H5的项目,有这样的一个需求:要求移动端这边做图片缓存,因为我们公司的这个项目是一个商城类的,所以里面会有很多的展示性的图片,由此导致的问题就是页面加载速度极慢,所以公司要求我们移动端将展示的图片保存在本地,目的就是为了第二次启动App的时候可以提升加载速度。所以为了解决该问题，我们需要拦截所有的URL请求并使用SDWebImage做图片缓存，在成功解决了该问题之后，又发现App莫名的出现闪退，多方查找原因后我们得出的结论是：由于展示性的图片过多（一个商品页面我数了一下展示了78张商品图片并且前端的同志还没有做分页缓存功能），在内存激增之后UIWebView自身极其容易发生内存泄漏所幸我们最低适配iOS8可以使用WKWebView，最终成功解决了闪退问题。

首先我们来看看怎样在H5的项目中使用SDWebImage做图片缓存。

我们需要拦截所有的URL请求，使用的不是UIWebView（最开始都是使用的UIWebView之后才是WKWebView）的代理方法shouldStartLoadWithRequest（该方法是处理H5和OC的交互使用的），而是继承NSURLProtocol，自己子类化并且实现其中的代理方法，可以拦截到所有的URL请求，我们在canInitWithRequest方法中去处理带有jpg，jpeg，png后缀名的URL（具体操作请点击连接：http://www.jianshu.com/p/0244e431fb3c，如果好用的话不要忘记点赞哦！），然后在startLoading方法中处理拦截到的URL请求，其中的思路就是：先看本地是否缓存有拦截的图片URL对应的本地图片，如果有那么使用本地图片替换否则下载该链接对应的图片到本地。还有要提的一点是：如果使用WKWebView，子类化NSURLProtocol是拦截不到URL请求的，如果想要拦截，请参考：github.com/LiuShuoyu/HybirdWKWebVIew（有用不忘点赞！）

到此，第一个问题解决：H5项目中利用SDWebImage做图片缓存，对于第二个问题：UIWebView引起的内存泄漏，我们的解决方案是：将UIWebView换成WKWebView。

简答介绍一下WKWebView：

苹果在iOS8中加入的用来替代UIWebView的控件。比UIWebView加载块一倍的控件，内存方面却比它少一半，但是相对的缓存处理方面会稍微差一点。优缺点如下：

优点：

将浏览器内核渲染进程提取出 App，由系统进行统一管理，这减少了相当一部分的性能损失。

js 可以直接使用已经事先注入 js runtime 的 js 接口给 Native 层传值，不必再通过苦逼的 iframe 制造页面刷新再解析自定义协议的奇怪方式。

支持高达 60 fps 的滚动刷新率，内置了手势探测。

缺点：

MK对缓存和Cookie操作没有UIWebView那么方便。（调用的API没有那么显著的用途。）

MK从iOS8才开始支持，也就是说在我们同时对iOS7支持的情况下，如果为了减少代码量及适配等方面因素，一样会选择UIWebView。

简单地对比一下UIWebView和WKWebView的几个代理方法：

1. 准备加载页面

UIWebViewDelegate - webView:shouldStartLoadWithRequest:navigationType

WKNavigationDelegate: -webView:didStartProvisionalNavigation:

2. 内容开始加载

UIWebViewDelegate: -webViewDidStartLoad:

WKNavigationDelegate: -webView:didCommitNavigation:

3. 页面加载完成

UIWebViewDelegate: -webViewDidFinishLoad:

WKNavigationDelegate: -webView:didFinishNavigation:

4. 页面加载失败

UIWebViewDelegate: -webView:didFailLoadWithError:

WKNavigationDelegate: -webView:didFailNavigation:withError:

WKNavigationDelegate: -webView:didFailProvisionalNavigation:withError:

再来讲讲WKWebView中需要的必备技能：原生和JS的交互

原生调用JavaScript的代码:

需要在页面加载完成之后，就是在- webView:didFinishNavigation:代理方法里面

[webView evaluateJavaScript:@"showAlert('奏是一个弹框')"completionHandler:^(iditem, NSError * _Nullable error) {

           // Block中处理是否通过了或者执行JS错误的代码

}];

JS调用原生：

千万记住：JS调用本地的方法需要和前段的伙伴配合，需要前段的伙伴在JS的方法中调用：

window.webkit.messageHandlers.appsend.postMessage("就是一个消息啊");

这个NativeMethod是和App中要统一的，配置方法也很简单

我们需要了解userContentController类，该属性帮助我们做原生和H5 的交互。我在实际操作中遇到这样的一个问题：我点击H5页面中拨打电话的按钮没有响应，原因就是我们没有统一好规则，前段在JS代码中加上：window.webkit.messageHandlers.appsend.postMessage("就是一个消息啊")，而我则是配置我们约定的标识：[userContentControlleraddScriptMessageHandler:selfname:@"appsend"];然后在代理方法中通过标识拿到前段传过来的参数调用原生方法进行打电话

- (void)userContentController:(WKUserContentController*)userContentController didReceiveScriptMessage:(WKScriptMessage*)message{

           if([message.nameisEqualToString: @"appsend"]) {

                NSString*phone = [@"tel://"  stringByAppendingString:message.body];

              [[UIApplicationsharedApplication]  openURL:[NSURLURLWithString:phone]];

}

其实明白了其中的原理，WKWebView的使用还是比较简单的，关于WKWebView更多的操作请看以下的参考文章：

http://www.jianshu.com/p/403853b63537（记得帮忙点赞！）

最后，说一些技术外的话吧，对于上面出现的几个问题真的把我和我同事整的心累的不行，我们一致认为这个H5项目的优化前端的同志才是应该出大力，但是没法啊，由于各种原因最后反正就是我们移动端的小伙伴去优化，这几个问题困扰了我们很久，希望遇到相关问题小伙伴读了该文章后能够对大家有所帮助。还有必须要提的是：问题能够解决还是首先要感谢网上那些热心分享技术的小伙伴们，所以大家在看了文章中几个链接涉及的文章，如果你觉得有用请不忘点赞，感谢大家！