by addy 原创文章,欢迎转载,但希望全文转载,注明本文地址。

本文地址:http://www.iamaddy.net/2017/03/wkwebview-wechat/

WKWebView

背景是微信webview将要从UIWebView切换成WKWebView,前端的web页面需要进行适配。

什么是WKWebView

官方的解释:WKWebView是一个显示交互式Web内容的对象,例如浏览器内的应用程序。您可以使用WKWebView在您的应用程序中嵌入Web内容。为此,创建WKWebView对象,将其设置为视图,并向其发送加载Web内容的请求。

为什么要用WKWebView

首先来看下UIWebView的槽点,通常的iOS App用UIWebView加载网页,这个自iOS2开始使用的网页加载器一直是开发的心病:加载速度慢,占用内存多,优化困难。如果加载网页多,还可能因为过量占用内存而给系统kill掉。

那wk有什么特点:
1、在性能、稳定性、内存占用有很大提升。有的文章说4倍的渲染性能,不知真假,从体验上来看,非常流畅。
2、允许JavaScript的Nitro库加载并使用(UIWebView中限制);
3、支持了更多的HTML5特性;
4、高达60fps的滚动刷新率以及内置手势;滚动刷新频率,从实际体验看,确实流畅。

总得来说更快,更少,更完善,iOS 的最佳选择。

Starting in iOS 8.0 and OS X 10.10, use WKWebView to add web content to your app. Do not use UIWebView or WebView。

iOS 8.0后的版本开始支持,目前已经都10.+了,可以大胆的用。

对H5页面的影响

1、点击事件,300ms的延迟还存不存?

令人高兴的是,300ms的这个问题在wkwebview得到了解决。前提是需要设置user-scalable=0 的页面,WKWebView将会移除 300ms 的 click 事件延迟。

var t;
document.getElementById('j_click').ontouchstart = function(){
   t = +new Date();
};
document.getElementById('j_click').onclick = function(){
   alert(+new Date() - t);
};
// 如果UIWebview 或者没有设置user-scalable的wk页面,t 大概是400ms+ 
// WKWebView t可以到40ms左右 

fastclick这类兼容库以及用touch事件模拟的click,可以说再见了。

2、滑动页面JS挂起的问题还有吗?

答案是没有了,即使滑动页面,js照旧执行。所以节流函数还是很有必要,减少不必要的大量计算。

以往在做滚动加载的组件时,微信内的翻页的时候老是要等待下一页加载,现在终于不用等了。

<body style="height:1000px;">
   <ul id="add"></ul>
</body>
<script type="text/javascript">
window.onscroll = function(){
       var ol = document.createElement('ol');
       ol.innerHTML = new Date();
       document.getElementById('add').appendChild(ol)
}
</script>

WKWebView微信适配 WKWebView微信适配

目前就发现这两点比较明显的改善,如果后续发现了再补充。当然wkwebview也有坑,具体微信内要怎么兼容看文档。

iOS微信在6.5.1,已经开始灰度了,后续版本会全量。兼容wkwebview需要关注的点请参考官方文档

参考
https://zhuanlan.zhihu.com/p/24990222?refer=bugly
http://www.layabox.com/news/217.html

http://nshipster.cn/wkwebkit/

本文地址:http://www.iamaddy.net/2017/03/wkwebview-wechat/,未经过允许,禁止一切形式的转载

本文为原创文章,可能会经常更新知识点以及修正一些错误,因此转载请保留原出处,方便溯源,谢谢合作

本文地址:http://www.iamaddy.net/2017/03/wkwebview-wechat/

想要打赏?你的鼓励是我前进的动力! addy打赏二维码

关注个人公众号web_lab,不定期更新一些干货~ web_lab公众号