写点什么

React Native 迎来重大架构升级,性能将大幅提升

  • 2021-07-26
  • 本文字数:1939 字

    阅读完需:约 6 分钟

React Native迎来重大架构升级,性能将大幅提升

7 月 14 日,React Native 核心团队的 Joshua Gross 在 Twitter 说,RN 的新架构已经在 Facebook 内部落地了,并且 99%的代码已经开源。这次的架构升级“蓄谋已久”,Joshua 说他们从 2018 年 1 月就开始规划了。


Facebook 曾在 2018 年 6 月宣布了大规模 重构 RN 的计划和路线图,整个的重构目的是为了让 RN 更轻量化、更适应混合开发,接近甚至达到原生的体验。具体包括以下几个方面:

  1. 改变线程模型。UI 更新不再同时需要在三个不同的线程上触发执行,而是可以在任意线程上同步调用 JavaScript 进行优先更新,同时将低优先级工作推出主线程,以便保持对 UI 的响应。

  2. 引入异步渲染能力,允许多个渲染并简化异步数据处理。

  3. 简化 JSBridge,让它更快更轻量。


这次的架构升级对于 React Native 意义重大,按照官方的说法,这将大幅度提升 RN 的性能。自 RN 发布以来,它大致经历了如下几次的版本迭代(图片来自京东熊文源 GMTC PPT),这一次主要是解决诟病已久的性能问题。



为了进一步了解 RN 这次架构迭代的细节,InfoQ 记者采访了 58 同城资深前端工程师,58RN、Hybrid 框架的负责人蒋宏伟。以下为具体内容。


InfoQ:能给大家介绍下你理解的这次架构升级吗?新的 Fabric 渲染引擎是不是会大幅度提升 RN 的性能?


蒋宏伟:首先说明一下,Fabric 不是渲染引擎,是新架构 UI 渲染部分的代号。React Native 新架构包括三个关键部分:JSI 、TurboModules 和 Fabric。JSI 全称是 JavaScript Interface,代替的是原来的 Bridge。通过 JS 调用 C++,C ++ 调用 Java/OC 的方式,实现了 JS 和 Java/OC 之间的相互操作的。


TurboModules 是新架构 API 部分的代号。得益于 JSI,JavaScript 可以直接调用 Native 模块的方法。类似于在浏览器中,JavaScript 调用获取经纬度方法,实际调用的是 C++ 底层的获取方法。


Fabric 是新架构 UI 渲染部分的代号。得益于 JSI,JavaScript 可以直接操作 Native 的组件,渲染 UI。类似于,在浏览器中,JS 调用 createElement 创建 div 元素,并通过 C++ 底层渲染 UI。


根据现有的性能报告来看,新架构的性能大概提升了一个数量级。这里的性能指的是 API、UI 的操作性能,对首屏性能的影响还有待进一步评估。


InfoQ:新的架构代码全量放到 GitHub 了吗?你们团队计划升级吗?


蒋宏伟:Facebook 内部落地的新架构代码并未完全放到 GitHub。目前,JSI 和 TurboModules 部分已经可以使用,Fabric 部分还要等上一段时间。此外,在新架构的生态方面,比如导航、动画等,估计会有很多变化。


我们今年是有升级计划的,也非常期望能够快点用上 RN 新架构。根据我们以往的升级经验,最需要关心的是新、旧版本兼容性问题。我们内部有 9 个 App,300+ 的项目需要迁移,既需要自动化迁移工具,也需要业务开发和测试同学的配合,还需要一套逐步扩量的方案。


InfoQ:大家经常会拿 RN 和 Flutter 做对比,2019 年 GMTC 上,京东架构师熊文源说,在启动性能上,RN 稍微优于 Flutter,但渲染方面明显不如 Flutter,这是 RN 整个框架的瓶颈。这次升级过后,你会怎么评价两个框架呢?


蒋宏伟:这次升级过后,RN 在性能上能够追平 Flutter。首先,JavaScript 和 Dart 语言上都支持了 AOT 预编译,打个平手。其次,JavaScript 和 Dart 和底层交互都是通过 C++ 进行的,也是打个平手。最后,RN 原生组件绘制有平台的优化加成, 相对于 Flutter 自绘引擎绘制,可能还会好上一些。


其他方面,萝卜青菜各有所爱,前端同学会更喜欢 RN 一些,客户端同学更喜欢 Flutter 一些


InfoQ:你们有调研过 Flutter 吗?


蒋宏伟:我们内部其实有很多 App 在用 Flutter,也开源了 Flutter Fair UI& 模板动态化框架,和 Magpie 开发的工具流。但 58 同城、安居客这种超级 App 没有用 Flutter,主要担心的还是包体积大小和启动内存。


InfoQ:从你视角看,决定跨端框架发展的关键因素是什么?跨端和原生的解决方案之间,未来会是一种怎么样的动态平衡?


蒋宏伟:跨端框架发展的关键因素是净收益的大小。从框架开发者的角度讲,Facebook 内部有 1000+ RN 页面,跨平台带来的净收益肯定很不错。Flutter 我有些不确定,这决定于 Google 的 Fuchsia 操作系统能否成功。从框架使用者的角度讲,生态起不来的,比如 Weex、NativeScript,开发成本太高,净收益可能为负的,这也会反过来制约框架的发展。


有原生就有跨端,二者会一直并存,但跨端方案的市场份额会变的更大。原生解决方案更多是在一些创新的、基础的场景中,比如短视频、VR 或者跨端基础设施。跨端解决方案,比如 Hybrid、小程序、RN、Flutter 等等,会更加成熟,使用的场景也会越多。又因为能够节约开发成本,在现有的场景中会被更多的使用。


京东架构师熊文源曾经在 GMTC 详细分享过 RN 的新架构,如果你想看他的 Slides 的话,可以在视频号给我私信,我单独发你。



2021-07-26 12:1915459
用户头像

发布了 219 篇内容, 共 146.3 次阅读, 收获喜欢 195 次。

关注

评论

发布
暂无评论
发现更多内容

嘉为蓝鲸DevOps研发效能管理平台V6.0重磅发布!

嘉为蓝鲸

DevOps 研发管理 研发效能 价值流

全面了解龙蜥衍生版 KeyarchOS 在安全、机密计算等方面的实践 | 龙蜥大讲堂浪潮信息专场

OpenAnolis小助手

开源 操作系统 龙蜥社区 龙蜥大讲堂

如何提升 API 的性能水平

Apifox

程序员 接口 API 开放 API API 性能

解锁AI Studio:玩转大模型应用,开启智能新时代

百度开发者中心

人工智能 深度学习 大模型

开源流量回放平台 AREX 在携程的大规模落地实践

AREX 中文社区

Java 开源 测试 流量回放

容器中的大模型(二) | 利用大模型,使用自然语言查询SQL数据库

智领云科技

数据库 sql 容器 AI大模型 大模型

你真的会写侧边栏收起动画吗?

前夕

CSS css3 前端

【论文速读】| MASTERKEY:大语言模型聊天机器人的自动化越狱

云起无垠

🔥🔥🔥最好用的SDK版本管理器(version-manager)

Geek_5bcc45

Java Go node.js Py Version

2024-04-03:用go语言,在一个小城市里,有 m 个房子排成一排, 你需要给每个房子涂上 n 种颜色之一(颜色编号为 1 到 n ), 有的房子去年夏天已经涂过颜色了,所以这些房子不可以被重新

福大大架构师每日一题

福大大架构师每日一题

如何选择合适的系统?MES系统和MOM系统的区别

万界星空科技

制造业 mes 万界星空科技 生产管理 MOM

容器中的大模型(三)| 利用大语言模型:容器化高效地部署 PDF 解析器实践

智领云科技

容器 PDF 大模型 AI大语言模型

中软协AI沙龙热议:智领云CEO彭锋解读AI大模型技术的应用前景与趋势

智领云科技

容器 AI大模型 大模型 中软协

Advanced RAG 01:讨论未经优化的 RAG 系统存在的问题与挑战

Baihai IDP

AI LLM 企业号 4 月 PK 榜 rag 检索增强生成

高柔性第二代扁线定子量产线正式上市

财见

ChatGPT全方位解析:如何培养 AI 智能对话技能?

测试人

软件测试

度安讲 | 首期「数据安全与隐私保护合规」技术沙龙顺利召开

百度安全

视频创作者必备应用!三步帮你解决前置内容条件,打造专属大片!

飞桨PaddlePaddle

百度 BAIDU 百度飞桨 AI应用 飞桨星河社区

什么是智慧厕所?如何打造智慧厕所?

光明源智慧厕所

智慧厕所 智慧公厕

中小型工厂应如何选择生产管理mes系统

万界星空科技

制造业 生产管理系统 mes 云mes 制造业工厂

Linux中的conntrack命令深入解析

GousterCloud

Linux 运维

Flink 流批一体在模型特征场景的使用

Apache Flink

大数据 flink 流批一体

深入探索:主流低代码开发平台的应用场景及开发流程

优秀

低代码开发平台 低代码平台 低代码平台应用场景

首个镜像服务商奖项公布!「Alinux 伙伴招募计划」最佳服务商名单来了

OpenAnolis小助手

镜像 操作系统 龙蜥社区 Alibaba Cloud Linux

OpenMLDB vs Redis 内存占用量测试报告

第四范式开发者社区

人工智能 机器学习 数据库 开源 特征

新兴势力展露头角? ERC-1111 协议能否开启下一个热潮

NFT Research

NFT NFT\

当设计遇见技术—低代码开发平台设计探索

inBuilder低代码平台

设计 交互式设计

通过淘宝开放平台API接口获取商品信息:标题、分类与店铺名称的新方法

技术冰糖葫芦

API 接口 API 文档

免费延期一年!Alibaba Cloud Linux 2 EOL 延保支持计划

OpenAnolis小助手

阿里云 操作系统 Alibaba Cloud Linux

4款免费可用的数据集成平台亮点

RestCloud

ETL 数据集成平台

React Native迎来重大架构升级,性能将大幅提升_开源_小盖_InfoQ精选文章