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

Posted 2020-08-07

使用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="CDVWKWebViewEngine" />
</feature>

<preference name="CordovaWebViewEngine" value="CDVWKWebViewEngine" />