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="CDVWKWebViewEngine" /></feature><preference name="CordovaWebViewEngine" value="CDVWKWebViewEngine" />

WKWebView針對於Cordova的IOS平台效能提升