一、背景

ROMA承接很多復(fù)雜圖表的渲染需求，在京東金融APP內(nèi)，特別是首頁(yè)首屏的圖表，對(duì)圖表渲染的及時(shí)性要求很高。近期業(yè)務(wù)反饋頻繁重啟時(shí)，首頁(yè)的黃金走勢(shì)圖偶現(xiàn)渲染不出的問(wèn)題，通過(guò)梳理圖表的渲染流程，對(duì)緩存策略、視圖加載和渲染過(guò)程進(jìn)行了重構(gòu)，確保渲染成功率，提升了渲染速度以及補(bǔ)充了異常重試的功能。

二、使用場(chǎng)景分析

京東金融App內(nèi)有很多使用復(fù)雜圖表的業(yè)務(wù)場(chǎng)景，以下截取部分場(chǎng)景。下圖分別是黃金歷史金價(jià)的走勢(shì)圖、用戶購(gòu)買的基金的收益走勢(shì)圖、小金庫(kù)的收益柱狀圖、用戶投資診斷的雷達(dá)圖、省錢賬單和AI助手賬單趨勢(shì)柱狀圖。

可見(jiàn)，金融App內(nèi)圖表的使用具備種類豐富、數(shù)據(jù)信息量大，定制程度高、交互頻繁等特點(diǎn)，經(jīng)調(diào)研發(fā)現(xiàn)，Apache ECharts 是一個(gè)基于 JavaScript 的功能強(qiáng)大的開(kāi)源可視化圖表庫(kù)，被廣泛應(yīng)用于數(shù)據(jù)分析、監(jiān)控系統(tǒng)、報(bào)表工具等領(lǐng)域。并且支持定制支持的圖表類型，可降低圖標(biāo)庫(kù)的體積和提升圖標(biāo)庫(kù)的加載速度。由于原生端并沒(méi)有類似的圖表庫(kù)，因次決定在 ROMA 中引入 ECharts 來(lái)承接復(fù)雜圖表的顯示需求 。

三、重構(gòu)過(guò)程分析

1、原理分析

ROMA 對(duì)外提供 echarts 標(biāo)簽，內(nèi)部依賴提前加載了 echarts.js 庫(kù)的 WebView，將圖表數(shù)據(jù)交給準(zhǔn)備好環(huán)境的 webveiw，達(dá)到渲染圖表的目的。這里有一個(gè)重要的前提就是成功加載了echarts.js 庫(kù)的 WebView 才具備快速渲染各類圖表的能力。并且需要提前打通 ROMA 與 Native，Native 與 WebView 之間的數(shù)據(jù)通訊，保證數(shù)據(jù)在三端之間的順暢流轉(zhuǎn)。

為此自定制了 JRTransEchartsWebView 專門(mén)用于渲染 echarts 數(shù)據(jù)，JRTransEchartsComponent 作為標(biāo)簽實(shí)現(xiàn)在承接 webview 和 jue 環(huán)境的數(shù)據(jù)傳遞和業(yè)務(wù)邏輯處理。以下類圖展示了各主要類對(duì)象之間的相互關(guān)系。

首先打通 Native 和 WebView 的數(shù)據(jù)交互，原生端在創(chuàng)建 WebView 的時(shí)候就向其環(huán)境中注入 window 的 message 事件監(jiān)聽(tīng)，攔截指定類型的事件，獲取從 WebView 環(huán)境中發(fā)來(lái)的數(shù)據(jù)。

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 發(fā)送數(shù)據(jù)通過(guò) evaluateJavaScript 的方式，向JS環(huán)境中輸入數(shù)據(jù)：

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 時(shí)就已經(jīng)建立，Native 和 webview 的數(shù)據(jù)交互也通過(guò) postMessage 的方式建立，如下圖所示：

以上，JUE 通過(guò)調(diào)用 call native 將數(shù)據(jù)發(fā)送到 Native，Native 通過(guò) window.dispatchEvent 的方式將數(shù)據(jù)傳遞給 WebView。而圖表上的手勢(shì)交互等事件 WebView 通過(guò) postMessage 的方式發(fā)送，在 Native 監(jiān)聽(tīng)指定類型的 message 獲取數(shù)據(jù)，通過(guò)處理并通過(guò) fire event 觸發(fā)到 JUE。

2、緩存的設(shè)計(jì)

對(duì)于 echarts 渲染圖表數(shù)據(jù)，大致經(jīng)歷以下過(guò)程，創(chuàng)建 webview，加載 echarts.js 渲染庫(kù)，資源開(kāi)始加載 ，資源成功加載，最后渲染圖表數(shù)據(jù)，這幾個(gè)過(guò)程中，除了最后一步渲染數(shù)據(jù)，前面的步驟都可以提前做，越早完成前面的工作，越能提升圖表渲染的效率。

為此，設(shè)計(jì)了可重復(fù)利用的并可自動(dòng)擴(kuò)容的 WebView 緩存容器 JRTransEchartsCache。在App啟動(dòng)階段緩存 min 個(gè) WebView 保存至緩存列表 cacheArray 中，并持續(xù)跟蹤 WebView 加載 echarts.js 的階段，確保在成功加載了 echarts.js 資源后再開(kāi)始渲染圖表數(shù)據(jù)。而對(duì)于過(guò)早的圖表渲染指令，則先保存至指定標(biāo)簽的指令緩存列表 eventArray 中，待成功加載后，再渲染 eventArray 中的數(shù)據(jù)。

而對(duì)于 WebView 加載 echarts.js 資源失敗的情況，也加入了失敗重試的邏輯，當(dāng)業(yè)務(wù)端發(fā)起數(shù)據(jù)渲染時(shí)會(huì)檢查環(huán)境狀態(tài)，而觸發(fā) echarts.js 的重新加載。

隨著 WebView 使用，其狀態(tài)被標(biāo)記為 using，并根據(jù)使用的情況，自動(dòng)觸發(fā) cacheArray 中的 WebView 擴(kuò)容，最大擴(kuò)容至 max 個(gè)。對(duì)于從詳情頁(yè)返回而釋放的圖表，其 WebView 將會(huì)被標(biāo)記為 free ，可提供為其他的圖表視圖使用。 當(dāng)使用圖表的業(yè)務(wù)持續(xù)增多，當(dāng) cacheArray 中的 WebView 都被使用后，則新創(chuàng)建的 WebView 不再加入 cacheArray，遵循當(dāng)次獲取，當(dāng)次創(chuàng)建，使用完成，就地銷毀的原則。

3、渲染流程

下圖記錄了從 App 啟動(dòng)到業(yè)務(wù)創(chuàng)建 echarts 圖表，到業(yè)務(wù)退出，到 App 退出期間，融合了緩存的初始化以及自動(dòng)擴(kuò)容，包括在 webview 加載 echarts.js 資源的不同階段對(duì)渲染指令的處理，以及視圖銷毀后的內(nèi)存處理等場(chǎng)景下的處理流程。

四、效果驗(yàn)證

為了更直觀的展示圖表在業(yè)務(wù)上的使用場(chǎng)景，使用重構(gòu)后的圖表標(biāo)簽渲染柱狀圖、條形圖、折線圖、餅圖和組合圖表，渲染的效果和操作都很流暢(由于文檔的限制，對(duì)以下視頻做了降頻和清晰度的處理)，效果如下：

五、總結(jié)

通過(guò)此次圖表的重構(gòu)，在App冷啟時(shí)，以 iPhoneXS Max 設(shè)備為例，首頁(yè)首屏渲染圖表數(shù)據(jù)的時(shí)間平均縮短了200ms；冷啟首頁(yè)首屏圖表的渲染成功率，由之前的平均90%提升至接近100%；非首頁(yè)首屏的圖表渲染幾乎零延遲；對(duì)于異常情況導(dǎo)致的環(huán)境初始化失敗的問(wèn)題，也在接受渲染指令時(shí)自檢渲染環(huán)境并重啟環(huán)境初始化，自動(dòng)恢復(fù)數(shù)據(jù)的渲染。如果你也對(duì)圖表渲染或者對(duì)跨端框架 ROMA 感興趣，可留言交流。

審核編輯 黃宇