京东鸿蒙上线前瞻——使用 Taro 打造高性能原生应用

news2024/9/20 0:33:31

背景

2024 年 1 月,京东正式启动鸿蒙原生应用开发,基于 HarmonyOS NEXT 的全场景、原生智能、原生安全等优势特性,为消费者打造更流畅、更智能、更安全的购物体验。同年 6 月,京东鸿蒙原生应用尝鲜版上架华为应用市场,计划 9 月完成正式版的上架。

早在 2020 年,京东与华为就签署了战略合作协议,不断加大技术投入探索 HarmonyOS 的创新特性。作为华为鸿蒙生态的首批头部合作伙伴,在适配鸿蒙操作系统的过程中,京东与华为一直保持着密切的技术沟通与共创,双方共同攻坚行业适配难点,并推动多端统一开发解决方案 Taro 在业界率先实现对鸿蒙 ArkUI 的原生开发支持。

本文将阐述京东鸿蒙原生应用在开发时所采用的技术方案、技术特点、性能表现以及未来的优化计划。通过介绍选择 Taro 作为京东鸿蒙原生应用的开发框架的原因,分析 Taro 在支持 Web 范式开发、快速迁移存量项目、渲染性能优化、高阶功能支持以及混合开发模式等方面的优势。

技术方案

京东在开发鸿蒙原生应用的过程中,需要考虑如何在有限的时间内高效完成项目,同时兼顾应用的性能与用户体验。为了达成这一目标,选择合适的技术方案至关重要。

在技术选型方面,开发一个鸿蒙原生应用,一般会有两种选择:

  • 使用原生 ArkTS 进行鸿蒙开发

  • 使用跨端框架进行鸿蒙开发

使用原生 ArkTS 进行鸿蒙开发,面临着开发周期冗长、维护多端多套应用代码成本高昂的挑战。在交付时间紧、任务重的情况下,京东果断选择跨端框架来开发鸿蒙原生应用,以期在有限的时间内高效完成项目。

作为在业界具备代表性的开源跨端框架之一,Taro 是由京东凹凸实验室团队开发的一款开放式跨端跨框架解决方案,它支持开发者使用一套代码,实现在 H5、小程序以及鸿蒙等多个平台上的运行。

通过 Taro 提供的编译能力,开发者可以将整个 Taro 项目轻松地转换为一个独立的鸿蒙应用,无需额外的开发工作。

另外,Taro 也支持将项目里的部分页面以模块化的形式打包进原生的鸿蒙应用中,京东鸿蒙原生应用便是使用这种模式进行开发的。

京东鸿蒙原生应用的基础基建能力如路由、定位、权限等能力由京东零售 mpass 团队来提供,而原生页面的渲染以及与基建能力的桥接则由 Taro 来负责,业务方只需要将写好的 Taro 项目通过执行相应的命令,就可以将项目以模块的形式一键打包到鸿蒙应用中,最终在应用内渲染出对应的原生页面,整个过程简单高效。

技术特点

Taro 作为一款开放式跨端跨框架解决方案,在支持开发者一套代码多端运行的同时,也为开发鸿蒙原生应用提供了诸多便利。在权衡多方因素后,我们最终选择了 Taro 作为开发鸿蒙原生应用的技术方案,总的来说,使用 Taro 来开发鸿蒙原生应用会有下面几点优势:

支持开发者使用 Web 范式来开发鸿蒙原生应用

与鸿蒙原生开发相比,使用 Taro 进行开发的最大优点在于 Taro 支持开发者使用前端 Web 范式来开发鸿蒙原生应用,基于这一特点,我们对大部分 CSS 能力进行了适配

  • 支持常见的 CSS 样式和布局,支持 flex、伪类和伪元素

  • 支持常见的 CSS 定位,绝对定位、fixed 定位

  • 支持常见的 CSS 选择器和媒体查询

  • 支持常见的 CSS 单位,比如 vh、vw 以及计算属性 calc

  • 支持 CSS 变量以及安全区域等预定义变量

在编译流程上,我们采用了 Rust 编写的 LightningCSS,极大地提升了 CSS 文件的编译和解析速度

(图片来自 LightningCSS 官网)

在运行时上,我们参考了 WebKit 浏览器内核的处理流程,对于 CSS 规则的匹配和标脏进行了架构上的升级,大幅提升了 CSS 应用和更新的性能。

支持存量 Taro 项目的快速迁移

将现有业务适配到一个全新的端侧平台,无疑需要投入大量的人力物力。而 Taro 框架的主要优势,正是能够有效解决这种跨端场景下的项目迁移难题。通过 Taro,我们可以以极低的成本,在保证高度还原和高性能的前提下,快速地将现有的 Taro 项目迁移到鸿蒙系统上。

渲染性能比肩原生开发

在 Taro 转换鸿蒙原生页面的技术实现上,我们摒弃了之前使用 ArkTS 原生组件递归渲染节点树的方案将更多的运行时逻辑如组件、动效、测算和布局等逻辑下沉到了 C++ 层,极大地提升了页面的渲染性能。

另外,我们对于 Taro 项目中 CSS 样式的处理架构进行了一次整体的重构和升级,并引入布局引擎 Yoga,将页面的测量和布局放在 Taro 侧进行实现,基于这些优化,实现一套高效的渲染任务管线,使得 Taro 开发的鸿蒙页面在性能上足以和鸿蒙 ArkTS 原生页面比肩。

支持虚拟列表和节点复用等高阶功能

长列表渲染是应用开发普遍会遇到的场景,在商品列表、订单列表、消息列表等需要无限滚动的组件和页面中广泛存在,这些场景如果不进行特殊的处理,只是单纯对数据进行渲染和更新,在数据量非常大的情况下,可能会引发严重的性能问题,导致视图在一段时间内无法响应用户操作。

在这个背景下,Taro 在鸿蒙端提供了长列表类型组件(WaterFlow & List),并对长列表类型组件进行了优化,提供了懒加载、预加载和节点复用等功能,有效地解决大数据量下的性能问题,提高应用的流畅度和用户体验。

(图片来自 HarmonyOS 官网)

支持原生混合开发等多种开发模式

Taro 的组件和 API 是以小程序作为基准来进行设计的,因此在实际的鸿蒙应用开发过程中,会出现所需的组件和 API 在 Taro 中不存在的情况,因为针对这种情况,Taro 提供了原生混合开发的能力,支持将原生页面或者原生组件混合编译到 Taro 鸿蒙项目中,支持 Taro 组件和鸿蒙原生组件在页面上的混合使用

性能表现

京东鸿蒙原生应用性能数据

经过对 Taro 的屡次优化和打磨,使得京东鸿蒙原生应用取得了优秀的性能表现,最终首页的渲染耗时 1062ms,相比于之前的 ArkTS 版本,性能提升了 23.9%;商详的渲染耗时 560 ms,相比于之前的 ArkTS 版本,性能提升 74.2%

值得注意的是商详页性能提升显著,经过分析发现商详楼层众多,CSS 样式也复杂多样,因此在 ArkTS 版本中,在 CSS 的解析和属性应用阶段占用了过多的时间,在 CAPI 版本进行了 CSSOM 模块的架构升级后,带来了明显的性能提升。

基于 Taro 开发的页面,在华为性能工厂的专业测试下,大部分都以优异的成绩通过了性能验收,充分证明了 Taro 在鸿蒙端的高性能表现。

总结和未来展望

Taro 目前已经成为一个全业务域的跨端开发解决方案,实现 Web 类(如小程序、Hybrid)和原生类(iOS、Android、鸿蒙)的一体化开发,在高性能的鸿蒙适配方案的加持下,业务能快速拓展到新兴的鸿蒙系统中去,可以极大满足业务集约化开发的需求。

未来计划

后续,Taro 还会持续在性能上进行优化,以更好地适配鸿蒙系统:

  • 将开发者的 JS 业务代码和应用框架层的 JS 代码与主线程的 UI 渲染逻辑分离,另起一条 JavaScript 线程,执行这些 JS 代码,避免上层业务逻辑堵塞主线程运行,防止页面出现卡顿、丢帧的现象。

  • 实现视图节点拍平,将不影响布局的视图节点进行整合,减少实际绘制上屏的页面组件节点数量,提升页面的渲染性能。

(图片来自 React Native 官网)

  • 实现原生性能级别的动态更新能力,支持开发者在不重新编译和发布应用的情况下,动态更新应用中的页面和功能。

总结

京东鸿蒙原生应用是 Taro 打响在鸿蒙端侧适配的第一枪,证明了 Taro 方案适配鸿蒙原生应用的可行性。这标志着 Taro 在多端统一开发上的新突破,意味着 Taro 将为更多的企业和开发者提供优秀的跨端解决方案,使开发者能够以更高的效率开发出适配鸿蒙系统的高性能应用。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2118740.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

C++ 多态学习笔记(下)

开始新的学习之前,我们先通过一段涉及继承、多态的 代码来回忆、加深理解。 Animal作为基类,我们要给每种动物实例化出sound()的模块,因为Animal在实际意义上没什么好实例化的,所以设计成抽象类。 class Animal { public:virtua…

又考了两个Oracle认证:RAC和DataGuard,文末送资料

号主姚远目前已经拥有Oracle的认证超过20个了,最近又考了两个Oracle 19c的认证,是RAC和DataGuard。其实内容和12c没有太大的区别,但题目依然很难,很多选项模拟两可,需要对相关概念非常清楚才能通过考试。姚远的运气不错…

Linux网络:应用层协议http/https

认识URL URL是我们平时说的网址 eg:http常见的URL http://user:passwww.example.jp:80/dir/index.htm?uid1#ch1 注意: 服务器地址就是域名,相当于服务器ip地址 像http服务绑定80端口号,https服务绑定443端口。ssh服务端口绑定…

EasyCVR无法启动并报错“error while loading shared libraries”,如何解决?

安防监控/视频汇聚平台EasyCVR视频管理系统以其强大的拓展性、灵活的部署方式、高性能的视频能力和智能化的分析能力,为各行各业的视频监控需求提供了优秀的解决方案。通过简单的配置和操作,用户可以轻松地进行远程视频监控、存储和查看,满足…

Python操作ES集群API(增删改查等)

前言:本博客仅作记录学习使用,部分图片出自网络,如有侵犯您的权益,请联系删除 学习B站博主教程笔记: 最新版适合自学的ElasticStack全套视频(Elk零基础入门到精通教程)Linux运维必备—Elastic…

Vue组件:插槽的使用

在实际开发中,子组件往往只提供基本的交互功能,而内容是有父组件来提供的。为此,Vue.js 提供了一种混合父组件内容和子组件模板的方式,这种方式称为内容分发。 1、基本用法 Vue.js 参照当前 Web Components 规范草案实现了一套内…

和 InternLM 解锁“谁是卧底”新玩法

本文来自社区投稿,作者LangGPT联合发起人、东北大学在读博士生王明 在大模型技术日益普及的今天,AI 的应用已经渗透到各个领域,带来了无数创新和乐趣。今天,我们将一起探索如何搭建一个 AI 版的“谁是卧底”游戏。通过 InternStud…

【Unity基础】Input中GetAxis和GetAxisRaw的区别

一句话描述:GetAxis使用了平滑过渡,而GetAxisRaw是直接改变。 在Unity中,Input.GetAxisRaw 和 Input.GetAxis 都用于获取输入设备的轴向输入(例如键盘、鼠标或手柄的摇杆),但它们的工作方式和返回值有细微…

GPU 服务器性能评估:多维度深度探索

在深度学习的浩瀚宇宙中,GPU 服务器犹如一颗璀璨的星辰,以其无与伦比的计算能力和效率引领着技术进步的浪潮。为了充分挖掘这一强大工具的潜力,我们需深入探寻其性能评估的奥秘,这不仅仅是对单一指标的简单堆砌,而是从…

从虚拟现实到元宇宙:Facebook引领未来社交的下一步

随着科技的迅猛发展,社交媒体正在经历一场深刻的变革。从最初的文本和图片交流,到如今的沉浸式虚拟现实(VR)和即将到来的元宇宙,社交互动的方式正在发生根本性的变化。作为行业领军者,Facebook(…

3GPP协议入门——物理层基础(一)

1. 频段/带宽 NR指定了两个频率范围,FR1:通常称Sub 6GHz,也称低频5G;FR2:通常称毫米波(Millimeter Wave),也称高频5G。 2. 子载波间隔 NR中有15kHz,30kHz,6…

数据库类型有哪些?

根据存储方式的不同,数据库可以分为不同种类。每种类型的数据库,都有各自使用场景以及不同的产品。 ​ 关系型数据库 关系型数据库(RDBMS)基于关系模型,通过表(Table)的形式来组织数据&#xf…

利士策分享,如何规划多彩的大学生活?

利士策分享,学习规划多彩的大学生活 踏入大学,如同开启一场充满未知与可能的旅程。 为了让这段旅程不仅充满学术的熏陶,还洋溢着生活的多彩与人际的和谐,我们需要精心规划,积极行动。 一、多彩规划:点亮大学…

双指针的运用

一、双指针 双指针 常⻅的双指针有两种形式,⼀种是对撞指针,⼀种是左右指针。 1.1 对撞指针:⼀般⽤于顺序结构中,也称左右指针。 • 对撞指针从两端向中间移动。⼀个指针从最左端开始,另⼀个从最右端开始&#xff…

一文揭秘:从零开发一套中小型医院的云HIS系统,需要多少开发成本?

从零开发一套中小型的云HIS(医院信息系统)系统,首先要组建团队,包括招聘、培训、设备购置,然后要经历需求分析、系统设计、编码、测试等多个阶段,这会消耗大量的时间,其开发成本会受到多种因素的…

《凡人歌》重塑现实主义爆款,正午阳光终于“杀”回来了

2024年的现实主义爆款,出自正午阳光之手。 今年剧集市场一个明显的变化在于,最贴近时代生活、最有“爆款潜质”的现实主义题材电视剧的缺位。根据云合数据,截止到2024年9月,年榜前十中没有一部现实主义大剧,古装剧却多…

在线编程实现!如何在Java后端通过DockerClient操作Docker生成python环境

目录 在线编程实现!如何在Java后端通过DockerClient操作Docker生成python环境 一、为什么要用后端程序操作Docker 二、安装Docker 1、安装Docker 2、启动Docker 三、DockerClient与CMD操作Docker的区别 四、干货!如何使用DockerClient实现在线编程…

通过信息架构提升商业智能:实现数据驱动创新的策略与方法

拥抱数据驱动时代 在当前的数字化转型浪潮中,数据已成为企业最重要的资产之一。全球范围内的网络巨头通过精细的数据管理和分析,已成功颠覆了传统行业。这些企业的成功不仅源于他们掌握了大量数据,还因为他们能有效地利用这些数据来做出精准…

研一小白读论文记录,计算机视觉,Transformer

论文是IEEE收录的一篇论文《CrossFormer: A Versatile Vision Transformer Hinging on Cross-Scale Attention》(《基于跨尺度自注意力机制的多功能视觉Transformer》) 泛读完之后最大的感悟有以下几点: 1、文章在实验的结果中呈现了大量的…

Getty Images推AI训练样本:3750张高质量照片免费开放

近日,全球领先的商业图库Getty Images发布了一项重大决策,宣布将为AI开发者提供一份包含3750张高分辨率照片的免费训练数据集。这份详尽的数据集覆盖了商业、教育、医疗健康、运动健身、物品物体、插图图标等15个不同领域,目的在于助力AI技术…