网易严选的wkwebview测试之路

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了网易严选的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+款云产品!

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


相关文章:
【推荐】 使用QUIC










以上是关于网易严选的wkwebview测试之路的主要内容,如果未能解决你的问题,请参考以下文章

基于Node.js+MySQL开发的开源微信小程序B2C商城(页面高仿网易严选)

细说Mammut大数据系统测试环境Docker迁移之路

细说Mammut大数据系统测试环境Docker迁移之路

直播报名 | 推荐系统技术实践之路

一个小白的测试环境docker化之路

一个小白的测试环境docker化之路