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" />
  • 相关阅读:
    iOS项目之wifi局域网传输文件到iPhone的简单实现
    iOS项目之苹果审核被拒
    iOS项目之模拟请求数据
    nvm-window常用命令
    初探浏览器渲染原理
    node + mongodb 简单实现自己的查询接口
    快速理解_.debounce方法
    tr标签使用hover的box-shadow效果不生效
    一个简单的Node命令行程序:文件浏览
    打造丝般顺滑的 H5 翻页库(传送门)
  • 原文地址:https://www.cnblogs.com/ismarter/p/5844254.html
Copyright © 2011-2022 走看看