ios js交互

WebView性能、体验分析与优化

落爺英雄遲暮 提交于 2020-01-04 03:27:14
在App开发中,内嵌WebView始终占有着一席之地。它能以较低的成本实现Android、iOS和Web的复用,也可以冠冕堂皇的突破苹果对热更新的封锁。 然而便利性的同时,WebView的性能体验却备受质疑,导致很多客户端中需要动态更新等页面时不得不采用其他方案。 以发展的眼光来看,功能的动态加载以及三端的融合将会是大趋势。那么如何克服WebView固有的问题呢?我们将从性能、内存消耗、体验、安全几个维度,来系统的分析客户端默认WebView的问题,以及对应的优化方案。 性能 对于WebView的性能,给人最直观的莫过于:打开速度比native慢。 是的,当我们打开一个WebView页面,页面往往会慢吞吞的loading很久,若干秒后才出现你所需要看到的页面。 这是为什么呢? 对于一个普通用户来讲,打开一个WebView通常会经历以下几个阶段: 交互无反馈 到达新的页面,页面白屏 页面基本框架出现,但是没有数据;页面处于loading状态 出现所需的数据 如果从程序上观察,WebView启动过程大概分为以下几个阶段: 如何缩短这些过程的时间,就成了优化WebView性能的关键。 接下来我们逐一分析各个阶段的耗时情况,以及需要注意的优化点。 WebView初始化 当App首次打开时,默认是并不初始化浏览器内核的;只有当创建WebView实例的时候,才会创建WebView的基础框架。

WebView性能、体验分析与优化

一个人想着一个人 提交于 2020-01-04 03:26:56
育新 徐宏 嘉洁 · 2017-06-09 20:03 在App开发中,内嵌WebView始终占有着一席之地。它能以 较低的成本 实现Android、iOS和Web的复用,也可以冠冕堂皇的突破苹果对 热更新 的封锁。 然而便利性的同时,WebView的性能体验却 备受质疑 ,导致很多客户端中需要动态更新等页面时不得不采用其他方案。 以发展的眼光来看,功能的动态加载以及 三端的融合将会是大趋势 。 那么如何克服WebView固有的问题呢? 我们将从性能、内存消耗、体验、安全几个维度,来系统的分析客户端默认WebView的问题,以及对应的优化方案。 性能 对于WebView的性能,给人最直观的莫过于: 打开速度比native慢 。 是的,当我们打开一个WebView页面,页面往往会慢吞吞的loading很久,若干秒后才出现你所需要看到的页面。 这是为什么呢? 对于一个普通用户来讲,打开一个WebView通常会经历以下几个阶段: 交互 无反馈 到达新的页面, 页面白屏 页面基本框架出现,但是没有数据; 页面处于loading状态 出现所需的数据 如果从程序上观察,WebView启动过程大概分为以下几个阶段: 如何 缩短这些过程的时间 ,就成了优化WebView性能的关键。 接下来我们逐一分析各个阶段的耗时情况,以及需要注意的优化点。 WebView初始化 当App首次打开时

js与app交互

China☆狼群 提交于 2019-12-19 13:19:39
1. 判断当前页面的环境 var u = navigator.userAgent; var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端 var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端 if(isAndroid){ //android环境            JSAndroid.getToken() }else if(isiOS){ //ios环境       getToken()      } 2.由于ios内部问题 有时要做特殊处理 web端: /*这段代码是固定的,必须要放到js中*/ function setupWebViewJavascriptBridge(callback) { if (window.WebViewJavascriptBridge) { return callback(WebViewJavascriptBridge); } if (window.WVJBCallbacks) { return window.WVJBCallbacks.push(callback); } window.WVJBCallbacks = [callback]; var WVJBIframe =

iOS与js交互(WebView+WKWebView)

心已入冬 提交于 2019-12-08 19:40:45
需求:1点击js登入按钮将用户账号和密码传给移动端 2将客户端的token传给html端 据我了解有以下几种方法 1:webview的javascriptCore 2:webkit 3:url拦截 4:第三方库 我用的是1和2 理论:js与oc相互调用并且传值 我们可以理解成河2边需要送东西的过程 我们需要在js和oc之间搭建一个桥梁而jsexport就是这做桥梁,有了桥梁以后在2端传值我们还需要一个对象(快递员) 就好比现实中js在桥的一段,而移动端在桥的这一边现在他们需要给彼此送东西那么就需要一个快递员(对象) ---------------------------------------------------------- 第一种WebView+ javascriptCore 第一步搭建2端之间桥梁javascriptcore 1)导入javascriptCore Build phass->link binary with libraries 添加头文件 #import <JavaScriptCore/JavaScriptCore.h> 2)初始化桥梁 @property(nonatomic,strong)JSContext *jsContext; 在web的webViewDidFinishLoad:代理方法中 self.jsContext = [self

ios- webView和WKWebView图片超出边界处理办法

雨燕双飞 提交于 2019-12-05 04:33:29
https://www.jianshu.com/p/5331aef351e0 ios- webView和WKWebView图片超出边界处理办法 代码: - (void)viewDidLoad { [super viewDidLoad]; // Do any additional setup after loading the view from its nib. self.titleLabel.text = self.model.name; self.myScrollView.delegate = self; self.backBtnTopLayout.constant = StatusBarHeight; self.backBtnHeightLayout.constant = self.navigationBarHeight; self.bannerView.autoScrollTimeInterval = 5; self.bannerView.bannerImageViewContentMode = UIViewContentModeScaleAspectFill; self.bannerView.backgroundColor = [UIColor whiteColor]; // WKWebView的配置 WKWebViewConfiguration

Hybrid App: 对比UIWebView和WebKit实现JavaScript与Native交互

こ雲淡風輕ζ 提交于 2019-12-04 16:06:01
一、简介 在前面一篇文章中讲到过实现JavaScript与Native交互的方式有一种就是使用原生内嵌webView。在iOS8之前,开发者只能使用苹果提供的UIWebView类来加载URL或者HTML网页视图,然后通过设置代理,在回调函数中拦截并处理自定义交互事件,功能十分有限,通常只是作为一个辅助视图使用。在iOS8之后,苹果对这方面的技术进行了重构和优化,推出了一个新的框架WebKit。WebKit提供了Native与JavaScript交互的方法,整个框架的结构很清晰,对外暴露的接口友好实用,极大地方便了开发者实现网页视图和的Native交互。并且,WebKit框架采用导航堆栈的模式来管理网页视图的跳转,对于网页视图的管理和渲染,开发者更加容易管控。慢慢地,咱来比较这两种webView的使用区别。 二、UIWebView 1、UIWebView的详细构成 UIWebView的类构成之:属性 //id类型,遵守UIWebViewDelegate协议 @property (nullable, nonatomic, assign) id <UIWebViewDelegate> delegate //只读属性,webView内部的滚动视图 @property (nonatomic, readonly, strong) UIScrollView *scrollView //只读属性

H5与Native交互之JSBridge技术

匿名 (未验证) 提交于 2019-12-03 00:40:02
一、原理篇 下面分别介绍IOS和Android与Javascript的底层交互原理 IOS 在讲解原理之前,首先来了解下iOS的UIWebView组件,先来看一下苹果官方的介绍: You can use the UIWebView class to embed web content in your application. To do so, you simply create a UIWebView object, attach it to a window, and send it a request to load web content. You can also use this class to move back and forward in the history of webpages, and you can even set some web content properties programmatically. 上面的意思是说UIWebView是一个可加载网页的对象,它有浏览记录功能,且对加载的网页内容是可编程的。说白了UIWebView有类似浏览器的功能,我们使用可以它来打开页面,并做一些定制化的功能,如可以让js调某个方法可以取到手机的GPS信息。 但需要注意的是,Safari浏览器使用的浏览器控件和UIwebView组件并不是同一个

iOS下JS与OC互相调用(六)--WKWebView + WebViewJavascriptBridge

£可爱£侵袭症+ 提交于 2019-12-01 04:41:08
iOS下JS与OC互相调用(六)--WKWebView + WebViewJavascriptBridge 转载:原地址 https://www.jianshu.com/p/e951af9e5e74 上一篇文章介绍了UIWebView 如何通过WebViewJavascriptBridge 来实现JS 与OC 的互相调用,这一篇来介绍一下WKWebView 又是如何通过WebViewJavascriptBridge 来实现JS 与OC 的互相调用的。WKWebView 下使用WebViewJavascriptBridge与UIWebView 大同小异。主要是示例化的类不一样,一些与webView 相关的API调用不一样罢了。 WKWebView 下使用 WebViewJavascriptBridge 来实现JS 与OC 的互相调用,也是通过拦截URL来实现的。 下面开始介绍WKWebView 如何通过WebViewJavascriptBridge 来实现JS 与OC 的互相调用。 关于下载 WebViewJavascriptBridge ,然后导入工程的部分就不再赘述了。 第一步,创建WKWebView。 这一步,唯一需要注意的地方,就是不用再设置 WKWebView 的 navigationDelegate ,下一步你就知道为什么了。 - (void)initWKWebView

iOS 与 js交互的其一方法 WebViewJavascriptBridge的使用

笑着哭i 提交于 2019-11-30 15:08:48
#import <WebViewJavascriptBridge.h> /// @interface ZWBridgeViewController ()<WKNavigationDelegate, WKUIDelegate, UIGestureRecognizerDelegate> @property ( nonatomic , strong ) ZWCommonNavBar *navBar; @property ( nonatomic , strong ) WKWebView *webView; @property ( nonatomic , strong ) WebViewJavascriptBridge *bridge; @property ( nonatomic , copy ) NSString *urlStr; @property ( nonatomic , copy ) NSString *webTitle; @end @implementation ZWBridgeViewController - ( instancetype )initWithParams:(NSDictionary *)params { self = [ super init]; if ( self ) { } return self ; } - ( void )viewDidAppear:(

WK 与 JS 的那些事 WKWebView使用

ⅰ亾dé卋堺 提交于 2019-11-29 23:13:49
苹果在iOS 8中推出了 WKWebView ,这是一个高性能的 web 框架,相较于 UIWebView 来说,有巨大提升。本文将针对 WKWebView 进行简单介绍,然后介绍下如何和 JS 进行愉快的交互。还望各位大佬不吝赐教。 本文分为两大部分 WKWebView 简单介绍 JS 交互 1 WKWebView 就目前移动开发趋势来说,很多 APP 都会嵌套一些 H5 的应用。H5 有一些 Native 无法比拟的优势,例如:更新快,不用发版,随时上线等等。然而在 iOS 中, UIWebView 是及其难用的。随着 iOS 8 的推出,Apple 重构了 UIWebView,于是 WKWebView 横空出世。 1.1 WKWebView VS UIWebView 根据官方文档,我们来简单对比一下 UIWebView 和 WKWebView,看看这两个到底有什么区别 WKWebView UIWebView 内存占用 小 大 且有内存泄漏 加载速度 快 慢 与 JS 交互 易 难 (可与 JSCore 配合) 帧率 60FPS 掉帧 从文档来看,二者区别还是很明显的,但到底区别有多大的,我们用数据说话。打开京东,网易,新浪这三个网站,从打开时间和占用内存上来比较一下,看谁能胜出。该测试在 2015款 MBP 上打开,使用 Xcode 9 GM 版,在 iPhone 8