网易严选的wkwebview测试之路

本文来自网易云社区

作者：孙娇

UIWebView是苹果继承于UIView封装的一个加载web内容的类,它可以加载任何远端的web数据展示在你的页面上，你可以像浏览器一样前进后退刷新等操作。不过苹果在iOS8以后推出了WKWebView来加载Web。UIWebView自iOS2就有，WKWebView从iOS8才有，毫无疑问WKWebView是将会逐步取代笨重的UIWebView。且UIWebView存在占用过多内存，js执行效率低等问题。而WKWebView网页加载速度大有提升，占用更少内存。

WKWebView相比于UIWebView

• WKWebView的内存远远没有UIWebView的开销大，没有缓存

• 拥有高达60FPS滚动刷新率及内置手势

• 支持了更多的HTML5特性

• 高效的app和web信息交换通道

• 允许Javascript的Nitro库加载并使用,UIWebView中限制了

• 提供加载网页进度的属性（estimatedProgress）

• 将UIWebViewDelegate与UIWebView拆分成了14类与3个协议(以前很多不方便实现的功能得以实现：官方文档说明)

基于以上种种优势，严选APP在年后的第一个版本里实现了UIwebview到wkwebview的大步跨越，作为一名客户端的测试人员，我更加关注的主要是wkwebview的各大特性背后带来的测试点，以下就从测试的视角分析一下替换wkwebview之后，测试中遇到比较多的问题：

1、首先就是COOKIE的问题

以前UIWebView会自动去NSHTTPCOOKIEStorage中读取COOKIE，但是WKWebView并不会去读取,因此导致COOKIE丢失以及一系列问题，在测试的过程中我们发现在一个活动页面触发了登录之后，返回该页面并没有同步到登录态的信息

从上图可以看出，在app进行登录后，福利社的webview并没有同步获取相应的登录态，究其原因，主要原因是：WKWebView COOKIE 问题在于 WKWebView 发起的请求不会自动带上存储于 NSHTTPCOOKIEStorage 容器中的 COOKIE（当然是开发解释给我听的），找到问题所在修改之后的表现：

表现完美！

2、wkwebview的本地html页面加载失败

严选app内置了一份网络解决方案，如若检测到无网络状态可以查看这个本地页面进行网络的配置（主要是iOS10系统刚推出的时候，需要用户开启app启动网络的权限才能使用的问题），但是替换了wkwebview之后，无网络状态下本地的html网页无法加载，结果：

开发大大排查之后发现是wkwebview中加载的方法变了（wkwebview不支持用loadRequest的方法加载本地的静态HTML），要替换不同的方法来加载，修复之后的效果

3、wkwebview页面样式问题

在测试过程中，替换wkwebview之后，很多APP内的H5页面样式出现了兼容的问题，尤其是针对iPhone X的适配方面，对此我们只能全局查看各种H5页面，一一检查页面是否错乱，大部分页面的问题都是页面底部或者导航栏异常。

在测试的过程中我们遇到最多的问题就是上述三个问题，如果各位还有遇到其他的问题，欢迎补充。

除了测试中遇到的问题，测试完成之后，我们对wkwebview的性能也做了简单的统计，主要是为了对比wkwebview相比较于UIwebview的优势在哪里，我们针对两种不同的webview，在APP内进行一些正常用户行为的操作（浏览首页及其他页面，查看商品详情及评论图片，浏览活动及专题页面，登录查看购物车及下单等等），对比统计了内存的消耗占比。主要操作了三种机型（5s，7，6splus），三种操作系统（9，10，11）。

从上图可以明显的看出来，wk在内存消耗方面还是有显著的提升的，尤其是针对性能较差的机器，如ios9系统的5s。

最后，WKWebView相较于UIWebView在整体上有较大的提升，满足OS上面使用同一套控件的功能，同时对整个内存的开销以及滚动刷新率和JS交互做了优化的处理。依据职责单一的原则，拆分成了三个协议去实现WebView的响应，解耦了JS交互和加载进度的响应处理。但是他有一个最致命的缺陷，就是WKWebView的请求不能被NSURLProtocol截获。而UIwebview可以让app对于H5容器使用NSURLProtocol技术将H5进行离线包的处理，H5的图片和Native的图片公用一套缓存，因此WKWebView是没有做缓存处理的，对网页需要缓存的加载性能要求没那么高的还是可以考虑UIWebView。

最最后，感谢开发大大的耐心指导及细心讲解webview背后的故事。

网易云免费体验馆，0成本体验20+款云产品！

更多网易研发、产品、运营经验分享请访问网易云社区。

相关文章：
【推荐】 使用 Prometheus + Grafana 对 Kubernetes 进行性能监控的实践
【推荐】 Dubbo与HadoopRPC的区别
【推荐】 基于开源，强于开源，轻舟微服务解决方案深度解读