当前位置: 首页 > news >正文

详解ROMA中复杂图表的渲染实现

一、背景

ROMA承接很多复杂图表的渲染需求,在京东金融APP内,特别是首页首屏的图表,对图表渲染的及时性要求很高。近期业务反馈频繁重启时,首页的黄金走势图偶现渲染不出的问题,通过梳理图表的渲染流程,对缓存策略、视图加载和渲染过程进行了重构,确保渲染成功率,提升了渲染速度以及补充了异常重试的功能。

二、使用场景分析

京东金融App内有很多使用复杂图表的业务场景,以下截取部分场景。下图分别是黄金历史金价的走势图、用户购买的基金的收益走势图、小金库的收益柱状图、用户投资诊断的雷达图、省钱账单和AI助手账单趋势柱状图。

 


 

可见,金融App内图表的使用具备种类丰富、数据信息量大,定制程度高、交互频繁等特点,经调研发现,Apache ECharts 是一个基于 JavaScript 的功能强大的开源可视化图表库,被广泛应用于数据分析、监控系统、报表工具等领域。并且支持定制支持的图表类型,可降低图标库的体积和提升图标库的加载速度。由于原生端并没有类似的图表库,因次决定在 ROMA 中引入 ECharts 来承接复杂图表的显示需求 。

三、重构过程分析

1、原理分析

ROMA 对外提供 echarts 标签,内部依赖提前加载了 echarts.js 库的 WebView,将图表数据交给准备好环境的 webveiw,达到渲染图表的目的。这里有一个重要的前提就是成功加载了echarts.js 库的 WebView 才具备快速渲染各类图表的能力。并且需要提前打通 ROMA 与 Native,Native 与 WebView 之间的数据通讯,保证数据在三端之间的顺畅流转。

为此自定制了 JRTransEchartsWebView 专门用于渲染 echarts 数据,JRTransEchartsComponent 作为标签实现在承接 webview 和 jue 环境的数据传递和业务逻辑处理。以下类图展示了各主要类对象之间的相互关系。

 

首先打通 Native 和 WebView 的数据交互,原生端在创建 WebView 的时候就向其环境中注入 window 的 message 事件监听,拦截指定类型的事件,获取从 WebView 环境中发来的数据。

NSString *jsStrring = @"window.addEventListener('message', (e) => { \var customDict = {'function':'jdttransWindowEventDispatch',\ 'careParamDict':{'data': e.data, 'origin': e.origin}};\ window.webkit.messageHandlers.JDTTransEchartsHandler.postMessage(customDict);})";
NSString *jscode = [NSString stringWithFormat:jsStrring];
WKUserScript *script = [[WKUserScript alloc]initWithSource:jscode injectionTime:WKUserScriptInjectionTimeAtDocumentStart forMainFrameOnly:YES];
[webView.configuration.userContentController addUserScript:script];

Native 向 WebView 发送数据通过 evaluateJavaScript 的方式,向JS环境中输入数据:

NSMutableDictionary *dict = [NSMutableDictionary dictionaryWithDictionary:@{@"type":@"message"}]; 
[dict jdd_setObjectCheck:message forKey:@"data"]; 
[dict jdd_setObjectCheck:@"*" forKey:@"origin"]; 
NSString *dictString = [dict jdd_JSONString]; 
NSString *jsString = [NSString stringWithFormat:@"javascript:(function (){ \var event = new MessageEvent('message', %@);\ window.dispatchEvent(event);})()",dictString]; 
[webView evaluateJavaScript:jsString completionHandler:nil];

JUE 和 Native 之间的通讯通道在初始化 ROMA 的 SDK 时就已经建立,Native 和 webview 的数据交互也通过 postMessage 的方式建立,如下图所示:

 

 

以上,JUE 通过调用 call native 将数据发送到 Native,Native 通过 window.dispatchEvent 的方式将数据传递给 WebView。而图表上的手势交互等事件 WebView 通过 postMessage 的方式发送,在 Native 监听指定类型的 message 获取数据,通过处理并通过 fire event 触发到 JUE。

2、缓存的设计

对于 echarts 渲染图表数据,大致经历以下过程,创建 webview,加载 echarts.js 渲染库,资源开始加载 ,资源成功加载,最后渲染图表数据,这几个过程中,除了最后一步渲染数据,前面的步骤都可以提前做,越早完成前面的工作,越能提升图表渲染的效率。

 


 

为此,设计了可重复利用的并可自动扩容的 WebView 缓存容器 JRTransEchartsCache。在App启动阶段缓存 min 个 WebView 保存至缓存列表 cacheArray 中,并持续跟踪 WebView 加载 echarts.js 的阶段,确保在成功加载了 echarts.js 资源后再开始渲染图表数据。而对于过早的图表渲染指令,则先保存至指定标签的指令缓存列表 eventArray 中,待成功加载后,再渲染 eventArray 中的数据。

而对于 WebView 加载 echarts.js 资源失败的情况,也加入了失败重试的逻辑,当业务端发起数据渲染时会检查环境状态,而触发 echarts.js 的重新加载。

随着 WebView 使用,其状态被标记为 using,并根据使用的情况,自动触发 cacheArray 中的 WebView 扩容,最大扩容至 max 个。对于从详情页返回而释放的图表,其 WebView 将会被标记为 free ,可提供为其他的图表视图使用。 当使用图表的业务持续增多,当 cacheArray 中的 WebView 都被使用后,则新创建的 WebView 不再加入 cacheArray,遵循当次获取,当次创建,使用完成,就地销毁的原则。

3、渲染流程

下图记录了从 App 启动到业务创建 echarts 图表,到业务退出,到 App 退出期间,融合了缓存的初始化以及自动扩容,包括在 webview 加载 echarts.js 资源的不同阶段对渲染指令的处理,以及视图销毁后的内存处理等场景下的处理流程。

 


 

四、效果验证

为了更直观的展示图表在业务上的使用场景,使用重构后的图表标签渲染柱状图、条形图、折线图、饼图和组合图表,渲染的效果和操作都很流畅(由于文档的限制,对以下视频做了降频和清晰度的处理),效果如下:

 


 

五、总结

通过此次图表的重构,在App冷启时,以 iPhoneXS Max 设备为例,首页首屏渲染图表数据的时间平均缩短了200ms;冷启首页首屏图表的渲染成功率,由之前的平均90%提升至接近100%;非首页首屏的图表渲染几乎零延迟;对于异常情况导致的环境初始化失败的问题,也在接受渲染指令时自检渲染环境并重启环境初始化,自动恢复数据的渲染。如果你也对图表渲染或者对跨端框架 ROMA 感兴趣,可留言交流。

http://www.hskmm.com/?act=detail&tid=35752

相关文章:

  • 前端部署新方案-技术篇(总体架构设计)
  • 2025气柱袋优质厂家推荐昆山戈尔德,专业缓冲包装定制生产厂家
  • 2025数控滚齿机实力厂家推荐,无锡吉莱特智能装备高精度定制!
  • 不用重启!处理笔记本HDMI接口在睡眠后无法识别显示器问题
  • 深入解析:设计模式第六章(观察者模式)
  • CallbackData错误原因分析
  • 2025微弧氧化加工厂家推荐:常州华源专业表面处理技术供应商
  • hash判断两个集合是否完全相同
  • 2025滑触线实力厂家推荐,无锡宸澳电气多型号防爆安全定制!
  • 2025年GEO优化公司推荐:五大实力企业口碑榜,引领AI搜索营销新生态
  • 2025年10月全屋智能家居品牌推荐:盈趣领衔对比评测榜
  • 2025码垛机厂家推荐济南金瑞祥,全自动龙门桁架定制实力企业
  • 2025防腐工程厂家推荐:无锡华金喷涂技术领先,定制防腐解决方案
  • [LangChian] 05.结构化提示词
  • C#获取文件md5码
  • 2025年10月防腐木凉亭厂家对比评测榜:江西纳美领衔五强深度解析
  • 2025通风天窗实力厂家推荐,正鑫专业制造与定制服务保障
  • 2025年10月治鼻炎产品推荐:权威对比评测榜助您精准选购
  • git提PR时很多别人的commit,清理多余的commit
  • Visual Studio 使用小知识记录
  • 2025数控锯床厂家推荐无锡正川,专业立式锯床制造企业
  • DeepSeek-OCR:让 AI “一眼看懂” 的黑科技
  • 生成一张图,苹果logo是透明冰块,安卓小机器人撒尿到苹果logo,冲出一个豁口
  • 业务记录:登录
  • kafka2.8出现NotLeaderOrFollowerException
  • IEC 61850 ICD文件解析
  • 2025无锡新梅赛智能设备厂家推荐:全自动视觉定位点胶机专业制造商
  • 2025安全光栅厂家推荐安一光电,超薄无盲区设计守护工业安全
  • 2025石头纸设备厂家权威推荐:鼎浩包装科技环保吹塑机制造专家
  • Java面试题总结