京东小程序JS API仓颉改造实践

作者:薛猛

本次创新实践为京东小程序团队与华为鸿蒙突击队合作对京东小程序API调用过程进行解析,通过借力仓颉实现小程序性能提升和便捷的开发体验

  1. 背景介绍

京东小程序容器是京东及其关联App的重要组成部分,承载了多种内部和外部业务。其中近期热门的模块秒送外卖、以及常用的买菜、超市店铺、奢侈品店铺等均属于小程序。

​编辑

  1. 小程序架构

京东鸿蒙版小程序框架整体如下所示:

​编辑

小程序采用双线程架构。即同时存在JS逻辑线程和WebView线程。其中JS逻辑线程(简称JS线程)负责运行JS引擎,执⾏业务逻辑;Webview通常运行在UI主线程,主要包括页面的渲染任务、响应交互事件并发送给JS线程。两个线程可能会启动worker子线程来辅助处理任务。 JS Bridge作为桥梁层,负责处理JS API的调用与派发。整体JS API派发逻辑由Native实现(C++)。当一个JS API调用请求到来后,首先判断该API是否有Native实现,如果没有则调用ArkTS的派发逻辑来调用到原生API实现。


  1. 性能瓶颈分析

小程序页面加载/活跃过程中存在大量的JS API的调用。通常由JS线程发起API调用,经过主线程执行后生成结果数据,再将结果返回。因此,会出现如下性能瓶颈点。

  1. API如Storage(存储)、Systeminfo(系统信息)和Network(网络请求)在启动阶段被调用数十次。集中的API调用导致在主线程上出现排队情况,占用大量主线程时间,无法及时处理webview任务。
  2. 由于线程之间数据不共享,跨线程的数据传递需要序列化和反序列化操作,响应延迟增大
  3. JS Bridge在与原生交互时需要调用大量的nAPI接口,创建nAPI线程,处理效率较低,开发维护成本大。API有数百个,如果全部使用Native处理多线程共享问题,开发维护成本高,可行性极低

​编辑

  1. 原生JS API调用过程拆解

本次选取京东小程序中执行频率最高的getSystemInfo API为例,展开拆解一次API调用的详细流程:

​编辑

getSystemInfo目前是由ArkTS实现。调用由JS线程提交给主线程,主线程启用taskpool执行后再接受返回结果,等待过程中可以流水线执行下一个API。可以看到单次JS API调用会占据主线程时间来处理。当API被频繁调用时,主线程无法及时处理其他webview任务

  1. 场景分析

对京东部分小程序场景采集trace分析。以路易威登LV店铺为例,该店铺小程序在冷启动过程约2800ms,其中有900ms-1000ms的时间在webview任务中穿插这大量的getSystemInfo API的调用。经过检查代码,虽然已经根据页面hashcode缓存了该API的结果数据,但每次获取缓存值仍需要占据主线程时间,因此在该场景上可以进行仓颉API改造尝试

  1. 仓颉改造实践

仓颉的部分特性在该场景性能优化上起到了决定性作用,其中包括:

1.作为鸿蒙系统官方语言之一,具备完善的鸿蒙系统的API能力,实现1比1改写原生API的可行性

2.仓颉具备线程池能力。仓颉语言的JS API执行不占用主线程时间。仓颉线程间具备天然的内存共享能力,省去序列化和反序列化开销

3.仓颉具备高效的与C语言互操作的能力。C语言与仓颉代码互相调用只需要声明和使用,代码简单,执行快,不需要调用nAPI协议接口

4.仓颉具备高效的与ArkTS互操作的能力,在需要时,可以获取到ArkTS语言的runtime,webview等信息,保证API执行的逻辑正确性

使用仓颉改写后的JS API执行流程如下图:

​编辑

本次改造在小程序架构上重点涉及到两个模块。在JSBridge中加入仓颉API的派发逻辑,和在JS API中加入仓颉实现的JS API(getSystemInfo),如下图

​编辑

  1. 仓颉穿刺优化效果

经过测试,仓颉改造后的getSystemInfo执行时间可缩短50%+,且不占用主线程时间。在LV小程序上进行冷启动端到端测试,启动性能可提升20%。 (约500ms+)

  1. 未来规划与展望

本次初步验证证明了在小程序场景,仓颉具备高效性能和开发潜力。本次验证也打造了仓颉JS API派发框架,未来基于此框架可以更快的扩展仓颉JS API。计划在以下方面进一步扩展验证仓颉:

1.更多API的仓颉化:尝试改造更多高频调用的JS API。并在京东近期更多热门场景(如秒送外卖)验证性能收益。

2.仓颉并发能力: 基于仓颉的高并发能力,尝试优化网络模块的性能,接入更多小程序

3.小程序其他阶段仓颉化探索: 除了JS API,探索小程序场景更多阶段的仓颉优化

4.在新场景使用仓颉开发:利用仓颉的性能和安全优势,将仓颉用于新模块新功能的开发。仓颉的高并发能力在AI、跨屏应用和高性能Web场景中具有广阔前景

5.跨平台支持:仓颉支持HarmonyOS、Android、iOS和PC平台,未来将完善京东跨端通用能力,降低多平台开发的复杂性。

相关推荐
小诸葛的博客几秒前
gin如何返回html
前端·html·gin
islandzzzz7 分钟前
(第二篇)HMTL+CSS+JS-新手小白循序渐进案例入门
前端·javascript·css·html
喝拿铁写前端9 分钟前
前端实战优化:在中后台系统中用语义化映射替代 if-else,告别魔法数字的心智负担
前端·javascript·架构
超人不会飛1 小时前
就着HTTP聊聊SSE的前世今生
前端·javascript·http
蓝胖子的多啦A梦1 小时前
Vue+element 日期时间组件选择器精确到分钟,禁止选秒的配置
前端·javascript·vue.js·elementui·时间选选择器·样式修改
夏天想1 小时前
vue2+elementui使用compressorjs压缩上传的图片
前端·javascript·elementui
今晚打老虎z1 小时前
dotnet-env: .NET 开发者的环境变量加载工具
前端·chrome·.net
用户3802258598241 小时前
vue3源码解析:diff算法之patchChildren函数分析
前端·vue.js
烛阴1 小时前
XPath 进阶:掌握高级选择器与路径表达式
前端·javascript
小鱼小鱼干1 小时前
【JS/Vue3】关于Vue引用透传
前端