A1--杨阳--支付宝跨平台原生渲染引擎工程实践.pdf

1、支付宝跨平台原生渲染引擎工程实践杨阳（鲁棒）支付宝高级无线开发专家杨阳支付宝高级无线开发专家花名鲁棒，来自支付宝终端基础技术部。从事客户端开发20多年，专注于手机、操作系统、智能硬件、IoT、GUI和图形图像领域，致力于多端融合的趋势下，打造鲁棒的跨平台渲染引擎解决方案，落地IoT、手机、桌面端等支付宝应用场景。0102030405背景和问题解决方案自渲染多端多场景实践效果和收益总结与展望背景和问题支付宝原生开发业务场景IoT端：形态差异大、规格跨度广手机端：原生开发三端一码问题和挑战RTOS：不支持C+Linux：Embeded/DesktopiOS：MobileAndroid：Mobile

2、Windows：XP10Harmony Next操作系统繁多CPU：400MHz 单核 32bitGPU：无 多核Flash：16MB Mem：8MB Screen：240 x320 Color：16bit Input：Key/Touch硬件配置跨度广RTOS：C语言Linux：C+iOS：ObjectiveCAndroid：JavaWindows：C#Harmony：ArkTS原生开发语言各异难以支持动态化动态化方案无法统一产品周期长运营困难难以开放动态化能力弱方案设计自渲染支付宝原生渲染引擎的变迁Cube引擎2016202020242021202320212020Rocket引擎动态卡片V

3、ueCube小程序小程序Native2024三端一码2023自渲染小程序橱窗Rocket轻应用Yoga LayoutFlow LayoutWeex VueRTOSAndroid/Windows小程序LiteLinux/Windows/AndroidlvglSkiaXR双屏组件化2025Cube Vue自渲染手机端IoT端Rocket 应用系统RTOSIoT方案缘起Rocket引擎低端设备动态化开放跨平台效率需求CPU：400MHz内存：剩余2MFlash：剩余2M不支持C+不支持动态化开放：C语言门槛高没有窗口UI系统RTOSLinuxAndroidHarmonyWindows开发：多语言维护

4、：多种包运营：多个平台DSL：Weex VUEJS：ES6（QuickJS）布局：Flex渲染模式：自渲染OS：Linux/RTOS引擎语言：C+UI框架：GreenUI图形：Skia最小内存：2MDSL：VUEJS：ES6（V8/QuickJS）布局：Flex渲染模式：平台半自绘制OS：Android/iOS引擎语言：C+UI框架：Android/iOS图形：Canvas/CoreGraphics最小内存：8MDSL：VUE/小程序JS：ES6（QuickJS）布局：Flex渲染模式：自渲染OS：Linux/RTOS/Android引擎语言：C语言UI框架：RocketUI图形：lvgl/S

5、kia最小内存：1MRocket阿里云IoT小程序Cube卡片JS Bundle前端框架DOM API脚本引擎编译期Virtual DOM TreeNative DOM TreeView TreeCSS ParserYoga Layout渲染管线RasterizeCompositionAnimation-Layout-PaintEvent JS C运行时InputBuildNative DOMWeex 1.0前端框架DOM API脚本引擎Capnp BinaryData C-CCube 卡片 CodeRocket引擎的探索RocketUI 轻量GUI框架GraphicsLvglSkiaWidg

6、etViewSystem PlatformRenderSystemText ViewImage ViewAbsolute LayoutSurface ViewFrame LayoutViewView GroupPlatform ViewEventAnimationTouchInputFocusInterpolatorValueHandlerDisplayWindowWindow ManagerLayerRTOS/Linux/Android/Windows/MacLayer CompositorHWCSoftwareOpenGLESPlatform WindowFramebufferSurfac