zoukankan      html  css  js  c++  java
  • 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" />
  • 相关阅读:
    数据清洗
    JAVA多线程三种实现方式
    QT-4.8.6 编译配置过程
    qt 编译问题总结
    [转载]tslib1.4与Qt4.8.6的交叉编译与移植
    STC12C5A60S2 @ 22.0184Mhz 精确延时
    STC12C5A60S2 双串口通信
    C# Bitmap 复制
    TextMate2 最新版下载及源码编译过程
    mac系统 PHP Nginx环境变量修改
  • 原文地址:https://www.cnblogs.com/ismarter/p/5844254.html
Copyright © 2011-2022 走看看