JSI初识

最新推荐文章于 2024-10-27 23:16:06 发布
最新推荐文章于 2024-10-27 23:16:06 发布
阅读量342 收藏
点赞数
分类专栏： 前端工具 文章标签： JSI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/iteye_2245/article/details/82473700
版权
native方法_JSI小试牛刀——Native同步调用JS代码
weixin_39730587的博客
12-05 519
上一篇有说到在有了JSI之后，JS和Native同时持有一个HostObject，那么JS和Native之间就有了同步调用的基础条件。JS同步调用Native实际上，在现在的RN（以0.59版本为例）中，已经实现了JS向Native代码的同步调用，在iOS中，可以通过宏RCT_EXPORT_BLOCKING_SYNCHRONOUS_METHOD来实现。@implementation ConfigM...
⚡️ React Native 启动速度优化——Native 篇（内含源码分析）
卤蛋实验室
04-09 660
Web 开发有一个经典问题：「浏览器中从输入 URL 到页面渲染的这个过程中都发生了什么？」 据我考据这个问题起码有十年历史了。在日新月异学不动的前端圈子里，这个问题能一直被问，就是因为因为它是个非常好的问题，涉及非常多的知识点，平时做一些性能优化，都可以从这个问题出发，分析性能瓶颈，然后对症下药进行优化。 不过今天我们不谈 Web 的性能优化，只是借助刚刚的那个那个经典问题的分析思路，从 React Native 的启动到页面的第一次渲染完成，结合 React Native 的源码和 1.0 的新架构，一
JSI2.1计划
专栏已毁弃，暂时迁移至：http://jindw.javaeye.com
01-01 221
先回顾历史： JSI1（2006-2007）是个简单的框架，只有脚本级别的依赖管理，只有阻塞同步装载模式。 JSI2 （2007-2008）是个庞然大物，同步装载，异步装载，延迟装载，装饰引擎。。。。。 网撒的太宽，而且学习曲线也非常陡峭。 JSI2.1 新的2008，JSI2也打算做点改进。 时至今日， JSI已经有两年多的历史了，自己也在大大小小的项目中有了不少实践，普遍的反映是。内核庞大...
RN新架构 JSI 介绍
m0_49508485的博客
01-21 8490
JSI是RN新架构实现JS与Native通信的基石，Turbomodules 也是基于 JSI 实现的。 对于了解RN新架构来说，先搞明白 JSI 是至关重要的，那下面就让我们来聊一聊 JSI。 一、什么是 JSI ？ JSI 的全称是 JavaScript Interface，即 JS Interface 接口，它是对 JS引擎 与 Native (C++) 之间相互调用的封装，通过 HostObject 接口实现双边映射，官方也称它为映射框架。 有了这层封装，在 R...
React Native JSI 和 JSC 是什么
hzxOnlineOk的博客
09-23 3483
JSI背景 由于Flutter.js的存在，和原生UI或者原生模块交互的性能问题成为了RN的弱点，为了弥补逐渐失去的地位，RN制作出了JSI来应对 JSI 是什么 在RN中，JSI是JavaScript Interface的缩写，JSI是一个轻量级的通用的API框架，可以应用于任意的JavaScript virtual machine，让各种平台可以方便的使用不同的JavaScr...
2022 年 React Native 的全新架构更新
恋猫de小郭的博客
02-12 4845
个人前言 熟悉我的人应该知道，虽然现在我一直主力于 Flutter， 但是 GSY App 系列项目最早其实是 React Native , 之后才是 Weex 和 Flutter ， 所以其实我对 RN 一直有着“初恋”的情节，基本上是它带着我走进前端和跨平台的领域，而恰巧最近看到了关于它的消息，就顺便了解下多年后它又有什么升级。 直到目前为止，React Native 的版本号是 0.67 ；我看了眼两年没更新的 GSYGithubApp ，用的 React Native 的版本号是 0.61 ，两
JSI简单介绍
woaisilu的博客
11-03 2861
先回顾历史： JSI1（2006-2007）是个简单的框架，只有脚本级别的依赖管理，只有阻塞同步装载模式。 JSI2 （2007-2008）是个庞然大物，同步装载，异步装载，延迟装载，装饰引擎。。。。。 网撒的太宽，而且学习曲线也非常陡峭。 JSI2.1 新的2008，JSI2也打算做点改进。 时至今日， JSI已经有两年多的历史了，自己也在大大小小的项目中有了不少实践，普遍的反...
ReactNative JSI(4)
起司锅仔的博客
10-27 620
React Native使用JavaScript来实现UI，新架构使用的jsi来实现C/C++和JavaScript之间的互相调用，而jsi是使用JS引擎提供的api能力来实现的，如果看过前面TurboModule的介绍，应该对JSI有一些概念了，这一节我们会更加进一步去介绍JSI的实现，其实JSI的逻辑是很简单的，只不过因为有非常多的数据类型，所以有许多的业务逻辑。
Django Admin
hehui1uu的博客
09-01 628
注明 本笔记主要参考《Django应用开发实战》《Django企业开发实战》,这两本书前者详细，后者精炼。学习之后真的是感觉自己进步了很多。值得一读，如果你遇到了值得一读的书籍，欢迎推荐给我，大家共同进步 文章目录注明前言一、pandas是什么？二、使用步骤1.引入库2.读入数据总结 前言 提示：这里可以添加本文要记录的大概内容： 例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。 提示：以下是本篇文章正文内容，下面案例可供参考
react-native-multithreading:using使用JSI为React Native提供快速简便的多线程
03-16
React本机多线程 :thread: 使用JSI的React Native的快速简便的多线程处理。 安装 npm install react-native-multithreading npx pod-install 需要包括的react-native-reanimated版本。 您可以自己打补丁，也可以等到它发布后再发布。 :warning: 警告：这仍然只是概念证明-请勿在生产中使用该库！ :warning: 为什么 由于越来越成为主流，因此可能有些功能实际上正在阻塞并且需要一段时间才能执行。 例如，像这样的存储库或SQLite JSI库可能要花费几毫秒来执行一个复杂的调用。 您不希望这样做时冻结整个React-JS线程，因为用户会感觉到明显的滞后或冻结。 那就是react-native-multithreading出现的地方。 您可以简单地将这样昂贵的计算/阻塞调用卸载到单独的线程中，而您的主要React
using使用JSI为React Native提供快速简便的多线程-C/C++开发
05-27
react-native-multithreading using使用JSI的React Native的快速简便的多线程处理。 安装npm install react-native-multithreading npx pod-i react-native-multithreading using使用JSI进行React Native的快速简便的多线程。 安装npm install react-native-multithreading npx pod-install需要一个包含PR＃1790的react-native-reanimated版本。 您可以自己打补丁，也可以等到它发布后再发布。 Warning警告：这仍然只是概念的证明-请勿在生产中使用此库！ Why为什么自从JSI成为主流以来，可能会有一些功能
RN：React Native原理以及新架构JSI、Fabric等概念
热门推荐
分享前端开发工程师的一些日常生活、前端知识点、职业发展、对一些问题的看法、感悟等等
02-12 1万+
说明 RN需要一个JS的运行环境， 在IOS上直接使用内置的javascriptcore， 在Android 则使用webkit.org官方开源的jsc.so。 此外还集成了其他开源组件，如fresco图片组件，okhttp网络组件等。 RN 会把应用的JS代码（包括依赖的framework）编译成一个js文件（一般命名为index.android.bundle), , RN的整体框架目标就是为了解释运行这个js 脚本文件，如果是js 扩展的API， 则直接通过bridge调用native方法; 如果是UI
一个测试同一页面不同分辨率下的效果的工具
Focus-Fe
01-30 2514
工具地址：http://www.benjaminkeen.com/open-source-projects/smaller-projects/responsive-design-bookmarklet/   工具功能：可以做出书签，在某一个页面使用，输出不同分辨率下的显示效果 ...
uglify的几个配置参数
Focus-Fe
04-03 2446
     记录几个uglify的配置参数：   uglify: { options : { beautify: true, mangle: false } }   mangle — pass false to skip mangling names. ...
工具介绍之Browsershots
Focus-Fe
10-09 2333
Browsershots是什么？             ----------------  在不同操作系统的不同浏览器下给指定的网页进行截图。       免费的开源工具 提交你指定的网址会被加入到一个任务队列，一群分布式的计算机会在浏览器里打开您的网站        官网地址：  http://browsershots.org/    ...
在线性能测试工具----jsPerf
Focus-Fe
10-18 2228
jsPerf--------- JavaScript performance playground   是一个在线的代码片段性能测试工具，可以对某些代码片段进行性能测试，会自动输出对比的结果。   在线地址：http://jsperf.com/...
Turn.js简介
Focus-Fe
01-14 930
  本文简单介绍一下turn.js这个东东！   主要做书本杂志翻页效果的 支持触摸屏设备     官网：       http://www.turnjs.com/       答疑问题库：       https://github.com/blasten/turn.js/issues         支持浏览器：   safari 5 Chrome16+...
工具之pngout
Focus-Fe
06-19 826
      pngout        可以对png进行极限压缩，无损的，不失真      官网：       http://advsys.net/ken/util/pngout.htm        扩展阅读：       http://2015.iteye.com/blog/906465       http://gongtaoios.lofter.com/po...
Sublime Text 2的如何多行编辑
Focus-Fe
06-22 717
      介绍一下Sublime Text2中如何处理多行编辑：   选中多行，按下Command+Shift+L  ----------   可以同时编辑这些行   选中文本，按下Command+D ----------- 可以继续向下同时选中下一个相同的文本进行同时编辑    选中文本，按下control + Command +G  可以一次性选择全部相同的文件进行...
react native jsi hermes
最新发布
03-17
### React Native 中 JSI 和 Hermes 的集成与使用 #### 背景介绍 JavaScript Interface (JSI) 是一种高效的接口机制，允许 JavaScript 代码和原生代码之间的直接交互。相比传统的桥接方法，JSI 提供更低的开销和更高的性能[^1]。Hermes 是 Facebook 开发的一款轻量级、高性能的 JavaScript 引擎，专为移动设备优化设计。React Native 支持通过 Hermes 来运行 JavaScript 代码，从而提升应用启动速度和内存效率。 #### 集成过程概述 为了实现 React Native 中 JSI 和 Hermes 的集成，开发者需要完成以下几个方面的配置： 1. **启用 Hermes 引擎** 在 `android/app/build.gradle` 文件中设置以下属性来启用 Hermes： ```gradle project.ext.react = [ enableHermes: true, // 启用 Hermes 引擎 ] ``` 2. **创建 JSI 模块** 使用模板项目（如 `react-native-jsi-template`[^2]），可以快速构建自定义的 JSI 模块。这些模块可以直接访问 C++ 层面的功能而无需经过传统桥梁结构。例如，在 C++ 环境下编写一个简单的加法函数并暴露给 JavaScript： ```cpp jsi::Value add(jsi::Runtime &rt, const jsi::Value &, const jsi::ValueArray &args){ double sum = args.at(0).asNumber() + args.at(1).asNumber(); return jsi::Value(sum); } void installGlobals(jsi::Runtime& rt, std::shared_ptr<jsi::HostObject> ho){ ho->setProperty(rt, "add", jsi::Function::createFromHostFunction( rt, jsi::PropNameID::forAscii(rt, "add"), 2, add)); } ``` 3. **测试功能** 安装好上述组件之后，可以在 JavaScript 端调用新注册的方法验证其工作情况： ```javascript import {NativeModules} from 'react-native'; console.log(NativeModules.JSIModule.add(5,7)); // 输出应为12 ``` 4. **调试与优化** 当遇到问题时，利用 Android Studio 或 Xcode 这样的工具可以帮助定位错误源；同时注意调整编译选项以适应不同平台特性需求。 #### 性能考量 采用 JSI 结合 Hermes 不仅简化了开发流程还显著提高了程序执行效能。然而实际操作过程中也可能面临一些挑战比如兼容性和稳定性等问题因此建议持续关注官方文档更新以及社区反馈以便及时解决可能出现的新状况[^3]。 ---
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值