原生技術&內核 - 4 - 清銳_瑜晟 -淘系交易終端架構探索與實踐.pdf

《原生技術&內核 - 4 - 清銳_瑜晟 -淘系交易終端架構探索與實踐.pdf》由會員分享，可在線閱讀，更多相關《原生技術&內核 - 4 - 清銳_瑜晟 -淘系交易終端架構探索與實踐.pdf（28頁珍藏版）》請在三個皮匠報告上搜索。

1、清銳：淘交易前端 瑜晟：淘交易客戶端淘系交易終端混合架構 探索與實踐錄 01 背景 02 標 03 屏性能優化 04 幀率&內存優化 05 總結與展望背景基礎交易鏈路是什么？一條流程鏈路，流程、節點驅動立足兩個核心場景，選到支，支到用購物確認訂單付成功訂單列表訂單詳情退款詳情極簡下單背景業務的特點？成交決策優惠湊單創新型交互產品試錯成本核：性能體驗核：業務迭代效率打開快滑動阻塞屏性能滑動幀率近 3 年上半財年，同期需求量對202120222023想發就發電商核鏈路，交易功能屬性強背景終端技術側這些年的變化購物下單訂單列表訂單詳情物流極簡下單退款NativeNativeNativeNativeN

2、ative-Native購物下單訂單列表訂單詳情物流極簡下單退款Native+Web/WeexNative+WebNativeNative+WeexNativeNative+WeexWeb20132023從純原開發逐步過渡到多跨端模式，終端技術側為什么發這種變化？背景客戶端遇到的問題？1.挑戰：發版效率問題開啟 集成BugFix 集成灰 發布灰 發布版本 提審正式版本 放量成為主 版本集成等待時間周期，平均 2 周，特殊情況 2周，甚版可發 業務需求交付周期，旦錯過集成點，需要等待2周左右2.挑戰：開發效率問題3.挑戰三：多端致性問題4.挑戰四：尾碎化問題需求 提出開發 完成安卓iOS鴻蒙最版

3、本活躍占70%左右活躍設備數于1000的版本200+安卓iOS活躍設備數于1000的版本近 100最版本活躍占70%左右業務需求新版本驗證只能覆蓋70%左右戶流量，30%龐戶體驗有損 眾多的碎化版本導致在穩定性、兼容性等臨極挑戰個需求開發多遍，投資源翻倍 多端協同合作成本 雙端因為代碼不致帶來穩定性險渲染邏輯業務邏輯UI動態性，所有UI交互相關變更均依賴客戶端發版 缺乏通的UI組件復 在跨平臺兼容性、布局復雜性等臨挑戰缺乏能的復性，能變更均需要發版 缺乏邏輯的動態編排能 傳統研發模式，業務邏輯耦合嚴重，可維護性差2周背景客戶端側架構這些年做的升級？組件化 協議DinamicX 升級新奧創 升級

4、原能 事件鏈舊石器時代新石器時代鐵器時代冷兵器時代熱兵器時代端側在動態化渲染和能上做到了“極致”，是否滿當前業務的訴求？20152017201820201.純原開發 2.級維護，不存在 能復 3.動態性1.純原開發，模塊化 和解耦 2.部分UI組件可以復 3.動態性1.組件渲染具備動態性 2.部分雙端渲染致性 3.不滿W3C標準 4.復雜交互法持 5.業務邏輯不持動態1.部分端側業務邏輯后 移新奧創配置平臺 2.部分標準化事件執 邏輯持動態化配置1.業務邏輯能進步 標準化和原化 2.持動態配置和下發背景新環境下依然臨的嚴峻考驗？能力抽象端側能力編排云端+XMLJSON原子能力視圖widget邏

5、輯表達式1.產品形態相對穩定2.交互模式可枚舉1.產品形態變更頻繁，尤其是創新型交互2.任務重、時間短學習成本表達有限程結構固化能上限低能補充依賴發版能發現使成本最終選型前端案：1個上線極簡下單 為例300+時評估Native 案：前端案：近100背景前端案的探索Native 容器+WebNative 容器+Weex 1Native 容器+Weex 2渲染引擎架構繪 UI+W3C 全集Native UI+W3C 集繪 UI+W3C 集渲染引擎可控性低較體驗上限?=Native研發效率較低較混合架構標性能體驗=Native，研發效率=Web2.滑動幀率：滿幀，60FPS1.屏性能：瞬開，350m

6、s3.迭代效率：想發就發，7x24 時可發布Native 業務容器 +Weex2 渲染框架優化屏性能&滑動幀率屏性能現狀分析從點擊到渲染完成，屏性能問題卡點在哪？導航動畫業務請求&渲染容器階段初始化資源加載從個對視頻開始問題分析容器初始化階段思考容器的初始化是否可以提前初始化掉？JS資源加載階段業務請求階段業務渲染階段思考資源緩存了么？緩存的命中率是否可以更些？思考是否能最早時機的發起業務請求？思考上些固定已知的元素是否可以提前作渲染準備？絡資源預取引擎渲染屏性能優化策略機制1.交易業務多，貫穿購中、購后等全鏈路2.交易是條流程鏈路，動線清晰交易鏈路 特點訂單詳情付成功訂單列表確認下單極簡下單

7、商品詳情購物前節點可以為后節點做更多的預處理屏性能優化絡資源預取-資源緩存命中率提升淘統使ZCache將前端資源打包成個ZIP下載到本地，使得戶在瀏覽的時候不需要再去下載資源，有效提升加載性能ZCache 安裝式訪問時安裝提前安裝命中率只有60%-70%左右？應該在哪些場景為哪些ZCache做提前安裝？核策略交易核流程鏈路上，為后置鏈路做資源包的提前安裝購物車NatIve下單訂單&物流詳情我淘直播間極簡下單訂單3逆向支付成功Weex資源預取調度標準調度預取客戶端預取JSBridge預取其他優化效果：命中率95+%屏性能優化絡資源預取-業務數據預請求實施1：導航動畫階段絡預請求導航階段接口預請求

8、容器加載頁面加載頁面發請求匹配緩存頁面渲染請求服務端匹配：直接返回數據不匹配 優點：所有渠道均可覆蓋 缺點：時機偏晚，導致網絡波動下命中率低實施2：前置絡預請求首次進入頁面滑動預請求本地緩存預請求 管控機制緩存 管控機制 優點：數據準備時機早，體驗好 缺點：服務端請求壓力1.只針對某些特定條件打開，如 弱、低端機等2.只針對某些請求RT較的業務請 求打開，如訂單的物流服務等屏性能優化引擎渲染-容器實例預熱核策略交易核流程鏈路上，前置在閑時為做Weex2實例的離屏渲染預熱實例預熱池1.閑時，預熱實例池2.點擊激活預熱實例 WeexInstance3.透傳業務必備參數給預熱實例iOS 低端機收益

9、300ms+安卓 低端機收益 400ms+內存開銷4M-7M核機制1.內存告警時機的預熱銷毀管控機制2.業務優先級的實例調度管控機制空閑態激活態前端可做資源預取低端機收益 200ms+未來給前端在更早時機做更多 閑時的任務處理提供了契機收益成本收益屏性能優化結果視頻對效果：前置絡預請求線上性能數據*瞬開：350ms（導航動畫）內屏渲染完成*秒開：1s內屏渲染完成瞬開率秒開率iOS：70+%安卓：50+%安卓：90+%iOS：90+%幀率優化-問題主要問題：1.Android 低端機掉幀嚴重，部分區域 20 FPS2.iOS 120Hz 刷屏掉幀，最僅 80 FPS測試設備：Vivo Y67（9

10、8分位）幀率優化-渲染流線VSyncVSync16.6 ms(60Hz)8.3 ms(120Hz)T1T2T3時間階段主要作T1VSync 信號輸T2渲染引擎處理T3渲染結果輸出VSyncT=T T T1T2T3掉幀幀率優化-PlatformViewPlatformViewPlatformView繪模塊繪模塊繪模塊繪PlatfromView+HC挖洞VDTLHCPlatformView渲染模式幀率提升iOS 刷Y67110+3545Android 如何進步優化？VSyncVSyncWeex UI 線程APP 主線程WeexRaster 線程全繪blcok12.12.23VSyncVSyncWe

11、ex UI 線程APP 主線程WeexRaster 線程2.12.2blcok132.0幀率優化-繪VSyncVSyncChoreographerLayout 1Weex UI 線程APP 主線程WeexRaster 線程Paint 1LogImgRender Object TreeLayout 2Paint 2最佳實踐commit to surfacefligner時間階段主要作引擎優化業務優化T1VSync 信號輸JNI ChoreographerNDK AChoreographerT2渲染引擎處理布局繪制/光柵化業務復雜度字/圖/CSST3渲染結果輸出SurfaceViewTexture

12、View說明：為便于演示，將 weex 之外的線程統稱為 App主線程commit to Composite Raster 幀率優化-最佳實踐舉例0.729 ms2.306 ms幀率優化-時間&空間內存構成優化式JS數據、props 裁剪DOM節點合并/刪除RenderObjectList Cell 回收圖庫圖尺、質量壓縮GPU 紋理RasterCache限制，斯模糊三緩存引擎優化其他內存告警，業務功能降級內存分布緩存有緩存內存與渲染時間的平衡幀率優化效果幀率提升iOS 刷110+5560Android 98分位 4055Android 95分位Vivo Y67（98分位）總結與展望體驗效率首

13、屏性能iOS 瞬開iOS 秒開Android 瞬開Android 秒開70+%90+%50+%90+%幀率iOS 刷Android 95分位60110+Android 99分位 4055iOS 60Hz5560發布窗口7 x 24 時可發布訂單業務為例發版依賴90+%需求 不依賴客戶端發版總結與展望底層 能網絡庫圖片庫資源緩存監控日志交易 容器性能體驗代碼預取數據預請求實例預熱預渲染交互體驗轉場體驗半屏浮層手勢交互動畫穩定性白屏監控內存監控性能監控大盤報警研發調試實時日志移動工具調試平臺全鏈路分析渲染 引擎Weex2API 擴展自繪組件擴展業務購物車下單訂單物流退款1.業務：規?；瘧?.個：突破邊界訂單詳情訂單列表消息支付成功多渠道極簡下單訂單半屏浮層獨內嵌地址支付成功訂單.多形態客戶端前端Weex混合架構圖感謝THANK YOU