必威-必威-欢迎您

必威,必威官网企业自成立以来,以策略先行,经营致胜,管理为本的商,业推广理念,一步一个脚印发展成为同类企业中经营范围最广,在行业内颇具影响力的企业。

说到跨平台,Native的性能角度来看看应该如何掌

2019-12-08 20:38 来源:未知

React Native 性能之谜

2017/04/14 · JavaScript · React Native

本文作者: 伯乐在线 - ThoughtWorks 。未经作者许可,禁止转载!
欢迎加入伯乐在线 专栏作者。

在 PhoneGap、RubyMotion、Xamarin、Ionic 一众跨平台开发工具中,React Native能够杀出一条血路,获得目前这么大的影响力,除了React社区生态圈的加持和Facebook的大力推广以外,另外一个最主要的原因就是其在开发效率和应用性能方面取得了一个比较好的平衡:

  • 开发效率通过JS工程实践,逻辑跨平台复用得到极大提升
  • 性能则通过全Native的UI层得到满足

不过,虽说框架提供了这个平衡能力,平衡点的选择却掌握在开发者手中,本文将从React Native的性能角度来看看应该如何掌握这个平衡点。

在PhoneGap、RubyMotion、Xamarin、Ionic一众跨平台开发工具中,React Native能够杀出一条血路,获得目前这么大的影响力,除了React社区生态圈的加持和Facebook的大力推广以外,另外一个最主要的原因就是其在开发效率和应用性能方面取得了一个比较好的平衡:

图片 1

前言

React Native的工作原理

在React Native的应用中,存在着两个不同的技术王国:JS王国和Native王国。应用在启动时会先进行双向注册,搭好桥,让两个王国知道彼此的存在,以及定义好彼此合作的方式:

图片 2

(图片来源: )

然后,在应用的实际运行过程中,两个技术王国通过搭好的桥,彼此合作完成用户功能:

图片 3

(图片来源:http://www.jianshu.com/p/978c4bd3a759)

因此,React Native的本质是在两个技术王国之间搭建双向桥梁,让他们可以相互调用和响应。那么就可以把上图简化一下:

图片 4

  • 开发效率通过JS工程实践,逻辑跨平台复用得到极大提升
  • 性能则通过全Native的UI层得到满足

ReactNative的文档地址有多个,如果你英文够好,就去研读官方的文档吧,
如果读原文比较吃力,中文官网也是不错的选择。

为什么跨平台是发展趋势?

React Native的性能瓶颈

经过上面的分析,我们就可以把一个React Native应用分成三个部分:Native王国、Bridge、JS王国。当应用运行时,Native王国和JS王国各自运行在自己独立的线程中:

Native王国:

  • 运行在主线程上(可能会有些独立的后台线程处理运算,当前讨论中可忽略)
  • iOS平台上运行Object-C/Swift代码,Android平台上运行Java/Kotlin代码
  • 负责处理UI的渲染,事件响应。

JS王国:

  • 运行在JS引擎的JS线程上
  • 运行JS代码
  • 负责处理业务逻辑,还包括了应该显示哪个界面,以及如何给页面加样式。

在Native王国中,经过谷歌、苹果公司多年的优化调整,Native代码能够非常快速的运行在设备上。在JS王国中,JS代码作为脚本语言,也能够很快速的运行在JS引擎上,这两边独立来看都不会有性能问题。性能的瓶颈只会出现在从一个王国转入另一个王国时,尤其是频繁的在两个王国之间切换时,两个王国之间不能直接通信,只能通过Bridge做序列化和反序列化,查找模块,调用模块等各种逻辑,最终反应到应用上,就是UI层用户可感知的卡顿。 因此,对React Native的性能控制就主要集中在如何尽量减少Bridge需要处理的逻辑上。

那么,什么情况下会需要Bridge处理逻辑呢?

  1. UI事件响应: 所有的UI事件都发生在Native侧,会以事件的形式传递到JS侧。这个过程非常简单,也不会涉及大量的数据转移。在React Native应用中,业务逻辑,应用状态,数据都在JS侧,所以UI事件只是一个触发器,不会有性能问题。
  2. UI更新:前面已经说过JS负责决定应该展示哪个界面,以及如何样式化界面,因此UI更新的发起方是JS侧,更新时会向Native侧同步大量的UI结构和数据,这类更新经常出现性能问题,尤其是在界面复杂、变动数据大,或者做动画、变动频繁时。
  3. UI事件响应和UI更新同时出现:在UI更新时,结构变化不大,则性能问题不大;但是如果这时又有UI事件触发JS侧逻辑处理,而该逻辑处理又比较复杂,耗时较长,导致JS侧没有时间片处理与Native侧数据同步时,也会发生性能问题。

不过,虽说框架提供了这个平衡能力,平衡点的选择却掌握在开发者手中,本文将从React Native的性能角度来看看应该如何掌握这个平衡点。

下面是我个人记录的一些笔记,仅供初学者入门参考

同一个应用,各个“端”独立开发,不仅开发周期长,而且人员成本高。同时,作为技术人员,也不应该满足于这种重复、低能的工作状态。在这样的形势下,跨平台的技术方案也受到越来越多人和企业的关注。

React Native的性能优化措施

前面已经解释了React Native的性能瓶颈会在什么地方,React Native官方也知道这些,其在React Native中提供了一些性能优化措施帮助开发者克服这些性能问题:

  1. 框架自带的React基于Virtual Dom的Diff算法保证了UI变动时传递的只是变化的UI部分,尽量减少需要同步的数据。
  2. 通过Direct Manipulation的方式直接在底层更新了Native组件的属性,从而避免渲染组件结构和同步太多视图变化所带来的大量开销。这样的确会带来一定的性能提升,同时也会使代码逻辑难以理清,而且并没有解决从JS侧到Native侧的数据同步开销问题。因此这个方式官方都不再推荐,更推荐的做法是合理使用setState()和shouldComponentUpdate()方法解决这类问题。
  3. 在遇到动画性能问题时,可以使用Annimated类的库,一次性把如何变化的声明发送到Native侧,Native侧根据接收到的声明自己负责接下来的UI更新。不需要每帧的UI变化都同步一次数据。
  4. Native和JS混编,把会大量变化的组件做成Native组件,这样UI的变更数据直接在Native侧自己处理了,无需通过Bridge,而不变的内部组件因为没有数据更新需要同步,所以也不会使用到Bridge。框架提供的NavigatorIOS相对于Navigator的性能提升就是这种做法。
  5. 遇到事件响应和UI更新同时发生导致的性能问题时,可以使用Interaction Manager把那些耗时较长的工作安排到所有互动或动画完成之后再进行。

React Native的工作原理

在React Native的应用中,存在着两个不同的技术王国:JS王国和Native王国。应用在启动时会先进行双向注册,搭好桥,让两个王国知道彼此的存在,以及定义好彼此合作的方式:

图片 5

(图片来源: )

然后,在应用的实际运行过程中,两个技术王国通过搭好的桥,彼此合作完成用户功能:

图片 6

(图片来源:

因此,React Native的本质是在两个技术王国之间搭建双向桥梁,让他们可以相互调用和响应。那么就可以把上图简化一下:

图片 7

预科

入门React Native前需要了解一下知识,这样能帮助你更快的掌握RN
Node:Node.js 教程
ReactJS:《React 入门实例教程》
ES6:《ECMAScript 6 入门》

本篇文章我将从原理、优缺点等方面为大家分享跨平台技术

探求性能和效率平衡的套路

在了解了React Native的性能瓶颈和优化措施之后,就可以大概总结一个探寻React Native开发效率和性能平衡点的套路:

第一步: 全JS实现, 从一开始在技术选型上用React Native就是为了保证开发的效率,在没有遇到性能问题之前,最大化效率是团队的一致追求。

第二步: 从JS侧进行性能优化

  • 对于那些明显会涉及Bridge、需大量处理逻辑的场景,比方说动画,复杂的手势操作响应等,尝试使用经过优化过的库(比方说:Animated),一次传递动画或者数据整个数据的描述给Native,Native侧自己会按照声明执行下去。
  • 使用InteractionManager把耗时操作递延到UI响应之后,处理那些存在因为耗时的JS操作导致的UI响应性能问题。

第三步:在真机上实测,检查性能问题点。不要过早优化,找到问题点再一一处理。

第四步:如果经过JS端的优化策略之后,在设备上还是有性能问题,可以把有问题的部分以Native方式实现,这也是为什么要推荐React Native团队中有10%左右的Native Developer。在这个步骤中,需要注意问题的隔离方式,假设一个场景:在移动一个Container时,Container的UI同时发生变化,但是Container内部的内容并没有发生变化,这种情况下,只需要用Native实现Container,Container内部的组件还是以JS实现。

1 赞 收藏 评论

React Native的性能瓶颈

经过上面的分析,我们就可以把一个React Native应用分成三个部分:Native王国、Bridge、JS王国。当应用运行时,Native王国和JS王国各自运行在自己独立的线程中:

Native王国:

  • 运行在主线程上(可能会有些独立的后台线程处理运算,当前讨论中可忽略)
  • iOS平台上运行Object-C/Swift代码,Android平台上运行Java/Kotlin代码
  • 负责处理UI的渲染,事件响应。

JS王国:

  • 运行在JS引擎的JS线程上
  • 运行JS代码
  • 负责处理业务逻辑,还包括了应该显示哪个界面,以及如何给页面加样式。

在Native王国中,经过谷歌、苹果公司多年的优化调整,Native代码能够非常快速的运行在设备上。在JS王国中,JS代码作为脚本语言,也能够很快速的运行在JS引擎上,这两边独立来看都不会有性能问题。性能的瓶颈只会出现在从一个王国转入另一个王国时,尤其是频繁的在两个王国之间切换时,两个王国之间不能直接通信,只能通过Bridge做序列化和反序列化,查找模块,调用模块等各种逻辑,最终反应到应用上,就是UI层用户可感知的卡顿。 因此,对React Native的性能控制就主要集中在如何尽量减少Bridge需要处理的逻辑上。

那么,什么情况下会需要Bridge处理逻辑呢?

  1. UI事件响应: 所有的UI事件都发生在Native侧,会以事件的形式传递到JS侧。这个过程非常简单,也不会涉及大量的数据转移。在React Native应用中,业务逻辑,应用状态,数据都在JS侧,所以UI事件只是一个触发器,不会有性能问题。
  2. UI更新:前面已经说过JS负责决定应该展示哪个界面,以及如何样式化界面,因此UI更新的发起方是JS侧,更新时会向Native侧同步大量的UI结构和数据,这类更新经常出现性能问题,尤其是在界面复杂、变动数据大,或者做动画、变动频繁时。
  3. UI事件响应和UI更新同时出现:在UI更新时,结构变化不大,则性能问题不大;但是如果这时又有UI事件触发JS侧逻辑处理,而该逻辑处理又比较复杂,耗时较长,导致JS侧没有时间片处理与Native侧数据同步时,也会发生性能问题。

环境

一. H5

关于作者:ThoughtWorks

图片 8

ThoughtWorks是一家全球IT咨询公司,追求卓越软件质量,致力于科技驱动商业变革。擅长构建定制化软件产品,帮助客户快速将概念转化为价值。同时为客户提供用户体验设计、技术战略咨询、组织转型等咨询服务。 个人主页 · 我的文章 · 84 ·   

图片 9

React Native的性能优化措施

前面已经解释了React Native的性能瓶颈会在什么地方,React Native官方也知道这些,其在React Native中提供了一些性能优化措施帮助开发者克服这些性能问题:

  1. 框架自带的React基于Virtual Dom的Diff算法保证了UI变动时传递的只是变化的UI部分,尽量减少需要同步的数据。
  2. 通过Direct Manipulation的方式直接在底层更新了Native组件的属性,从而避免渲染组件结构和同步太多视图变化所带来的大量开销。这样的确会带来一定的性能提升,同时也会使代码逻辑难以理清,而且并没有解决从JS侧到Native侧的数据同步开销问题。因此这个方式官方都不再推荐,更推荐的做法是合理使用setState()和shouldComponentUpdate()方法解决这类问题。
  3. 在遇到动画性能问题时,可以使用Annimated类的库,一次性把如何变化的声明发送到Native侧,Native侧根据接收到的声明自己负责接下来的UI更新。不需要每帧的UI变化都同步一次数据。
  4. Native和JS混编,把会大量变化的组件做成Native组件,这样UI的变更数据直接在Native侧自己处理了,无需通过Bridge,而不变的内部组件因为没有数据更新需要同步,所以也不会使用到Bridge。框架提供的NavigatorIOS相对于Navigator的性能提升就是这种做法。
  5. 遇到事件响应和UI更新同时发生导致的性能问题时,可以使用Interaction Manager把那些耗时较长的工作安排到所有互动或动画完成之后再进行。

系统环境要求

IOS : MacOS, 黑苹果
Android :MacOS, Linux, Windows

说到跨平台,没人不知道H5。不管是在Mac、Windows、Linux、iOS、Android还是其他平台,只要给一个浏览器,连“月球”上它都能跑。

探求性能和效率平衡的套路

在了解了React Native的性能瓶颈和优化措施之后,就可以大概总结一个探寻React Native开发效率和性能平衡点的套路:

第一步: 全JS实现, 从一开始在技术选型上用React Native就是为了保证开发的效率,在没有遇到性能问题之前,最大化效率是团队的一致追求。

第二步: 从JS侧进行性能优化

  • 对于那些明显会涉及Bridge、需大量处理逻辑的场景,比方说动画,复杂的手势操作响应等,尝试使用经过优化过的库(比方说:Animated),一次传递动画或者数据整个数据的描述给Native,Native侧自己会按照声明执行下去。
  • 使用InteractionManager把耗时操作递延到UI响应之后,处理那些存在因为耗时的JS操作导致的UI响应性能问题。

第三步:在真机上实测,检查性能问题点。不要过早优化,找到问题点再一一处理。

第四步:如果经过JS端的优化策略之后,在设备上还是有性能问题,可以把有问题的部分以Native方式实现,这也是为什么要推荐React Native团队中有10%左右的Native Developer。在这个步骤中,需要注意问题的隔离方式,假设一个场景:在移动一个Container时,Container的UI同时发生变化,但是Container内部的内容并没有发生变化,这种情况下,只需要用Native实现Container,Container内部的组件还是以JS实现。

配置

所有的技术学习都应该从环境搭建开始,这里也没什么好总结的,最好的方法就是跟着官网指导配置环境
如果你是node的老手,那就直接动手安装以下环境吧:

  • node
  • npm
  • react-native-cli
  • Xcode
    安装Xcode IDE和Xcode的命令行工具(IOS开发依赖)
  • Android Studio
    下载必须的插件:
    a) JDK1.8+
    b) Show Package Details
    c) Android SDK Build Tools (指定23.0.1版本)
    d) Android Support Repository
    配置基础环境:
    a) ANDROID_HOME (如运行是遇到问题可参考此文http://www.jianshu.com/p/a77396301b22)
    b) JAVA_HOME

1.浏览器架构

测试

react-native init RNDemo
cd RNDemo
react-native run-ios

如果你的虚拟机启动了,那么恭喜你,你的环境已经配置成功!
如果运行报错,可以文章最后找寻解决方案。

图片 10

虚拟机启动界面

下面,我们来看看让H5如此横行霸道的浏览器的架构:

语法

首先需要了解一些基本的React的概念,比如JSX语法、组件、state状态以及props属性。
还需要掌握一些React Native特有的知识,比如原生组件的使用。

教程上的东西我就不多说了,官方文档上有详细的讲解

直接从代码上讲解新手注意点吧

图片 11

Hello World

传统惯例,入门先行,Hello World

你可以新建一个项目,然后用上面的代码覆盖你的index.ios.js或是index.android.js 文件,然后运行看看。

import React, { Component } from 'react';
import { AppRegistry, StyleSheet, Text } from 'react-native';
class HelloWorldApp extends Component {
  render() {
    return (
      <Text style={styles.red}>Hello world!</Text>
    );
  }
}
const styles = StyleSheet.create({
  red: {
    color: 'red',
    fontWeight: 'bold',
  }
});
// 注意,这里用引号括起来的'HelloWorldApp'必须和你init创建的项目名一致
AppRegistry.registerComponent('HelloWorldApp', () => HelloWorldApp);

从语法上看,RN和ReactJS语法区别不大,都是采用JSX和ES6的形式,如果你对ReactJS和ES6不熟悉,建议你先拜读下阮一峰的博文教程:《React 入门实例教程》,《ECMAScript 6 入门》

相较写Web App,区别在于RN的语法引入了原生的组件

import { AppRegistry, StyleSheet, Text } from 'react-native';

RN中虽然使用JS写原生UI,但不再使用常规HTML标签 <div> 或是 ` ,而是使用RN的组件`AppRegistry 模块写在index.ios.js或是index.android.js文件里,用来告知React Native哪一个组件被注册为整个应用的根容器,一般一个应用只运行一次。

仅仅使用props和基础的View、Text、Image以及TextInput组件,就足以编写各式各样的UI组件了

User Interface 用户界面:提供用户与浏览器交互

样式

按照JSX的语法要求使用了驼峰命名法:

  • font-weight -> fontWeight
  • background-color -> backgroundColor

React Native中的尺寸都是无单位的,表示的是与设备像素密度无关的逻辑像素点:

<View style={{width: 50, height: 50, backgroundColor: 'powderblue'}} />

Browser Engine 浏览器引擎:控制渲染引擎与JS解释器

事件

事件的注册跟ReactJS没什么区别

class MyButton extends Component {
  _onPressButton() {
    console.log("You tapped the button!");
  }

  render() {
    return (
      <TouchableHighlight onPress={this._onPressButton}>
        <Text>Button</Text>
      </TouchableHighlight>
    );
  }
}

此处注册的组件为TouchableHighlight,具体使用哪种组件,取决于你希望给用户什么样的视觉反馈

  • 一般来说,你可以使用TouchableHighlight来制作按钮或者链接。注意此组件的背景会在用户手指按下时变暗。
  • 在Android上还可以使用TouchableNativeFeedback,它会在用户手指按下时形成类似墨水涟漪的视觉效果。
  • TouchableOpacity会在用户手指按下时降低按钮的透明度,而不会改变背景的颜色。
  • 如果你想在处理点击事件的同时不显示任何视觉反馈,则需要使用TouchableWithoutFeedback

常用的事件有:
点击:onPress
长按:onLongPress
缩放:maximumZoomScale,minimumZoomScale

另外关于Props、State、样式、布局、事件等知识点的详解,官方文档上都有详细的讲解,比较基础,这里就不做介绍了

Rendering Engine 渲染引擎:负责页面渲染

跨平台

'Learn Once,Write Anywhere' and not 'Write Once,Running Anywhere'.

RN并不能算上是真正的跨平台的语言,虽然可以通过打包实现不同平台打包不同组件,但是有些组件需要我们针对不同平台编写不同代码。这就要求我们不用储备一些原生开发的知识。

JavaScript Interpreter JS解释器:执行JS代码,输出结果给渲染引擎

工作原理

图片 12

通信示意图

RN的本质是在两个模块之间搭建双向桥梁,让他们可以相互调用和响应,简单的示意图为

图片 13

Networking 网络工作组:处理网络请求

Native模块

运行在主线程上(可能会有些独立的后台线程处理运算,当前讨论中可忽略)
iOS平台上运行Object-C/Swift代码,Android平台上运行Java/Kotlin代码
负责处理UI的渲染,事件响应。

UI Backend UI后端:绘制窗口小部件

JS模块

运行在JS引擎的JS线程上
运行JS代码
负责处理业务逻辑,还包括了应该显示哪个界面,以及如何给页面加样式。

Data Storage 数据存储:管理用户数据

Bridge模块

Native和JS模块之间不能直接通信,只能通过Bridge做序列化和反序列化,查找模块,调用模块等各种逻辑,最终反应到应用上

浏览器由以上7个部分组成,而“渲染引擎”是性能优化的重中之重,一起了解其中的渲染原理。

性能

使用React Native替代基于WebView的框架,使App刷新可以达到每秒60帧(足够流畅),并且能有类似原生App的外观和手感,虽然RN框架已经提供了这个平衡的能力,但平衡点的选择却掌握在开发者手中,即便是Native也无法避免开发方式带来的性能消耗

2.渲染引擎原理

性能影响原因

业务逻辑运行在JS线程上,负责API的调用,事件的处理,状态的更新,而事件的响应UI的变化发生在主线程上,60帧/s的频率要求每一帧的响应处理只有16.67(1000/60)ms,如果超过了16.67ms就会发生丢帧,如果丢帧超过100ms就会产生明显的卡顿现象。所有降低每一帧运算的消耗才能提升性能。

不同的浏览器内核不同,渲染过程会不太一样,但主要流程还是一致的。

性能影响切面

UI事件响应: 性能影响小
UI更新: JS侧会向Native侧同步大量的UI结构和数据,界面复杂、变动数据大,或者做动画、变动频繁,容易出现性能问题。
UI事件响应和UI更新同时出现: 两种事件如果占用了过多的线程,就会导致另一种事件不能及时响应,表现在应用上就是卡顿

图片 14

常见影响性能的点

console,ListView,动画Animated

分为下面6步骤:

性能优化

经过多年的发展和优化,JS和Native可以在各自的模块线程高效迅速的运行,性能的瓶颈主要在Bridge模块上,尤其是在JS和Native模块间频繁的调用会导致Bridge压力过大,产生卡顿

  1. 利用React自带的Virtual Dom的Diff算法尽量减少需要同步的数据,合理利用setState方法
  2. 在遇到动画性能问题时,可以使用Annimated类的库,一次性把如何变化的声明发送到Native侧,Native侧根据接收到的声明自己负责接下来的UI更新。不需要每帧的UI变化都同步一次数据。
  3. Native和JS混编,把会大量变化的组件做成Native组件
  4. 遇到UI事件响应和UI更新同时,可以使用Interaction Manager把那些耗时较长的工作安排到所有互动或动画完成之后再进行

HTML解析出DOM Tree

App高性能开发引导

RN的开发并没有一种高质量产出的方法,因为各个项目间有着不同的组件组合,因此只能通过高效的开发方式来尽可能的优化应用。
一般来说,通过几版优化都能达到“极致体验”的要求。
下面列一下高效开发方式的流水:

  1. 全JS实现,保证开发的高效率,高产出
  2. 发现问题先在JS测做优化,如上面提到的Annimated类库,Interaction Manager。
  3. 真机测试,找全问题再做处理,避免出现连锁bug
  4. JS测解决不了的问题再有Native组件完成。

CSS解析出CSSOM

关于热更新

DOM Tree与CSSOM关联生成Render Tree

原理

1、RN是使用脚本语言来编写的,是的代码可以不用事先编译便可即读即运行
2、RN在发布时将代码资源打包成一个文件 bundle js文件
3、其他的基础插件不变,仅仅替换一个bundle文件就实现了热更新

Layout 根据Render Tree计算每个节点的尺寸、位置

流程

图片 15

热更新的流程图

Painting 根据计算好的信息绘制整个页面的像素信息

Rushy

Rushy是国内RN团队自主研发的一套热更新包管理平台

Composite 将多个复合图层发送给GPU,GPU会将各层合成,然后显示在屏幕上。

Pushy的特点:

  1. 命令行工具&网页双端管理,版本发布过程简单便捷,完全可以集成CI。
  2. 基于bsdiff算法创建的超小更新包,通常版本迭代后在1-10KB之间,避免数百KB的流量消耗。
  3. 支持崩溃回滚,安全可靠。
  4. meta信息及开放API,提供更高扩展性。
  5. 跨越多个版本进行更新时,只需要下载一个更新包,不需要逐版本依次更新。

图片 16

从以上6步,我们可以总结渲染优化的要点:

社区

RN同ReactJS一样,有着强大的社区,从RN版本更新的速度上就可以看出来

图片 17

发布序列表

平均2个月一个版本

google的搜索结果也能说明RN的影响力

图片 18

google搜索结果

开发者需要用到的组件在JS.Coach基本都可以找到。

图片 19

image.png

Layout在浏览器渲染过程中比较耗时,应尽可能避免重排的产生

参考&分享

  • ReactNative 官方网站:http://reactnative.com
  • ReactNative 中文官方网站:http://reactnative.cn
  • React Native性能和效率平衡之谜:http://zhuanlan.51cto.com/art/201704/537115.htm
  • React Native通信机制详解:http://blog.cnbang.net/tech/2698/
  • React Native 从入门到原理:http://www.jianshu.com/p/978c4bd3a759
  • React-Native学习指南:http://www.jianshu.com/p/fd4591a978ba
  • 【简书专题】React Native开发经验集:http://www.jianshu.com/c/45054b9e38c7

复合图层占用内存比重非常高,可采用减小复合图层进行优化

以上就是浏览器端的内容。但H5作为跨平台技术的载体,是如何与不同平台的App进行交互的呢?这时候JSBridge就该出场了。

3.JSBridge原理

JSBridge,顾名思义,是JS和Native之间的桥梁,用来进行JS和Native之间的通信。

图片 20

通信分为以下两个维度:JavaScript 调用 Native,有两种方式:

拦截URL Scheme:URL Scheme是一种类似于url的链接(boohee://goods/876898),当web前端发送URL Scheme请求之后,Native 拦截到请求并根据URL Scheme进行相关操作。

注入API:通过 WebView 提供的接口,向 JavaScript 的 Context中注入对象或者方法,让 JavaScript 调用时,直接执行相应的 Native 代码逻辑,达到 JavaScript 调用 Native 的目的。

TAG标签:
版权声明:本文由必威发布于必威-前端,转载请注明出处:说到跨平台,Native的性能角度来看看应该如何掌