首页 > 代码库 > WKWebView针对于Cordova的IOS平台性能提升

WKWebView针对于Cordova的IOS平台性能提升

使用cordova做跨平台开发已久,针对于Android的性能与页面渲染问题仍然让人头疼,因为仍然有一部分人使用性能一般的手机,版本在 4.2-4.4之间,甚至都无法支持HTML5的flex布局,使得我们不得不使用crosswalk以增强我们的webview,但是它给我们带来的确 实使得安装包大了将近20M。话说回来cordova在iPhone6运行真是神速,但是针对于IOS仍然会有一大部分人使用iPhone4系列或者 iPhone5系列,在这些手机上确无法与iPhone6比及,现在WKWebView可以使得它有明显的提升。

技术分享

  • 聊聊家常

Ionic框架已经日益成熟,它使得我们很轻松就能实现与原生相似的体验,然而APP的速度是一个必要的条件,我们发现大多数NB的APP都有 着一个共同的特点,那就是流畅。其实裸露的cordova的原理就是利用每个平台的本地webview去运行部署在本机的一个web页面,并且能够使用 js调用底层相关的接口。

ios默认的web浏览器是Safari,目前IOS提供了两套不同的webview技术,一个是有点年迈的“UIWebview”,一个是年轻力壮的“WKWebView”,
WKWebView 在性能方面比 UIWebview显著的快,我们称之为“巨快”,现在苹果公司在新发布的ios版本去更新它,因为
Safari的应用程序需要WKWebView,以前由于各种原因是的ionic无法无缝融合 WKWebView,就在今天早上我突然发现ionic已经解决了这个问题,大家记住这个人叫“Manu”,使得我使用中文的方式告诉大家这个好消息,官方是在2016年08月18日公布的消息。

  • 这意味着什么?

你可以使用WKWebView使得你的cordova应用在IOS更快更流畅,
WKWebView解决了cordova工程面临的诸多问题,如XHR请求和CORS,储存问题,以及一些渲染DOM的性能问题,它升级了本机与网络的接口,这意味这个只想XHR请求的file:协议会被截获并重定向,然而对正常的XHR请求会通过。

不仅如此, WKWebView运行所耗费的内存有显著的减小,使得启动应用更快(之前我做过实验,针对于“熊猫金融”app,iPhone6,6s启动不到一秒,iPhone5,5s,5c要4-5秒),使用JIT编译Javascript,提高稳定性和安全性,并且达到了最新的web标准,官方的实验大意是说他们使用了 WKWebView 之后是内存从160MB降到了20MB,从稳定性来讲,崩溃率下降了70%。

  • 安装步骤

现在ionic已经发布了 wkwebview 的插件 cordova-plugin-wkwebview-engine

地址:https://github.com/driftyco/cordova-plugin-wkwebview-engine

安装插件:

ionic plugin add https://github.com/driftyco/cordova-plugin-wkwebview-engine.git --save

在使用过程中你可以通过测试它是否支持IndexDB来判定是UIWebView还是WKWebView。

if (window.indexedDB) {   console.log("I‘m in WKWebView!");} else {   console.log("I‘m in UIWebView");}

在config.xml配置需要的权限

<feature name="CDVWKWebViewEngine">  <param name="ios-package" value=http://www.mamicode.com/"CDVWKWebViewEngine" /></feature><preference name="CordovaWebViewEngine" value=http://www.mamicode.com/"CDVWKWebViewEngine" />

WKWebView针对于Cordova的IOS平台性能提升