第十九届D2终端技术大会：淘宝 Weex 跨多端业务高效交付实践

第十九届D2终端技术大会淘宝Weex跨多端业务高效交付实践第十九届D2终端技术大会二、Weex引擎技术演进第十九届D2终端技术大会在标准化、性能、开发体验方面都有大幅提升。淘天业务技术淘天业务技术Weex技术发展历程正式开发Weex2.0新架构稳定新架构稳定架构治理、技术融合2022架构治理、技术融合20222025201520162018202020212023适配鸿蒙20242025201520162018202020212023适配鸿蒙2024LayoutNG升级ComposeLayoutNG升级Compose探索2020.8能力增强、业务升级RenderingNGWeex“从1到2”的技术变迁Weex1.0Weex1.0JSFrameworkWeexCoreAndroidWeex2.0WeexFramework基础框架QkingQkingWeex1.0和2.0的技术对比能力更标准编译期优化低成本跨多端第十九届D2终端技术大会Weex2.0的现状（2025.3）•配套的工具/平台可覆盖研发/调试/PV，去年同期相比业务体量增加第十九届D2终端技术大会二、Weex引擎技术演进淘天业务技术Weex2.0WeexFramework基础框架QkingQkingWeex核心架构已经稳定第十九届D2终端技术大会Weex2.0近期技术探索第十九届D2终端技术大会•background-clip:te•background-attachment•N年前以低成本为目标而设计1:N节点树关系难以维护布局性能优化瓶颈出现滚动丢帧问题层级&手势和标准不太—致渲染引擎原理回顾第十九届D2终端技术大会渲染引擎原理回顾Weex基础渲染流程初代布局引擎的弊端“一对多初代布局引擎的弊端“一对多”,还可以更高效第十九届D2终端技术大会LayoutNG的核心改造象RenderElement树，跨线程复简化节点构建流程第十九届D2终端技术大会简化节点构建流程移除旧的RenderElement树UINode树跨线程复用合并布局节点，统—样式运算DOM:UINode:LayoutObject基本保持1:1:1统—ComputedStyle样式结构，避免多趟布局灵活构建匿名布局节点，支持复杂混排第十九届D2终端技术大会灵活构建匿名布局节点，支持复杂混排根据节点结构和增删操作，动态创建AnonymousBlock可实现inline&block任意混排+动态调整重构RenderLayer，实现更标准层模型优化Layer的创建与合成，充分考虑outofflow等场景淘天业务技术淘天业务技术LayoutNG实际效果•重构代码量6.5w+⾏•Web截图对比通过率86.5%提升到97.82%•低端机帧率提升9%•RenderObject&Layer数量大幅减少，内存降低15.9%•CSS变量和calc()•任意属性%布局•Flex布局细节完善•background-clip:text•background-attachment••background-clip:te淘天业务技术RenderingNG的核心改造•SkSL着色器编译Jank。•更好利用现代化图形API。•适配图片纹理/文本绘制/PlatformView等•添加窥孔优化、rastercache等•与Compose底层渲染管线融合(LayoutNG)构建/样式/布局/绘制—>合成/光栅化/渲染(RenderingNG)第十九届D2终端技术大会二、Weex引擎技术演进淘天业务技术新支持的WebAndroidiOS鸿蒙系统适配方案整体介绍第十九届D2终端技术大会鸿蒙系统适配方案整体介绍A.Weex框架适配，提供面向开发者的三端一致的接入API核心功能基于C/C++三端保持一致B.渲染引擎适配WeexWeex架构特点◆平台无关的C/C++代码占比高，天然多端复用◆基于自渲染架构，对平台依赖少，适配成本可控主要适配工作主要适配工作◆gn/ninja构建系统适配，支持鸿蒙平台交叉编译◆渲染引擎适配，对接平台Surface/事件输入等◆对接二方移动中间件，如图片库/网络/埋点监控等第十九届D2终端技术大会渲染引擎适配适配要点适配要点PlatformViewDisplayListCompositionPlatformViewDisplayListCompositionSurfaceMessageLoopVsyncSurfaceMessageLoopVsync•RenderSurface适配，对接平台窗体环境(基于XComponSkia/ImpellerSkia/ImpellerFreetype/Harfbuzz/ICU•适配Freetype/Harfbuzz/ICUUnicorn-渲染引擎•适配平台Vsync信号，用于驱动渲染(Unicorn-渲染引擎•消息循环适配（基于libuv）OH_XComponentOH_NativeWindowOH_XComponentOH_NativeWindow•图片解码适配（基于pixelMap+外接手淘自研图片库）……鸿蒙平台鸿蒙平台NDK依赖淘天业务技术第十九届D2终端技术大会如何支持混合渲染(PlatformView)技术挑战技术挑战PlatformPlatformView支持情况PunchingHybridCompositionAndroidHarmonyOS••如何保证渲染不抖动•如何处理层叠问题•如何处理事件分发•性能&稳定性&系统兼容性PlatformPlatformView模式•Overlay•Overlay/Punching:将原生视图放置在自绘Surface再与平台视图走平台管线合成与光栅化，需要线程合并，•TextureDisplay:原生视图现在平台侧渲染，然后转为外接纹理，走自绘渲染管线让纹理与自绘内容—起合成Z-orderStackXComponentNodeContainerUnicornSurfaceOH_NativeImageTextInputRenderNode…VideoRenderNodeEmbedView第十九届D2终端技术大会如何处理事件冲突如何处理事件冲突••解法:父视图监听并缓存touchevent，Weex会通知平台侧是否消费了事件，如果不消费，则通过鸿蒙postTouchEventAPI将touch事件转发，ArkUI组件需要使用NodeController创建。•使用系统parallelGesture，将系统内置手势和比其优先级高的手势做并行化处理，通过结合列表滚动状态（是否到达边界）就可以决定让哪个组件来响应手势淘天业务技术第十九届D2终端技术大会第十九届D2终端技术大会渲染引擎与渲染引擎与Compose原生研发模式ComposeMultiplatformComposeMultiplatform•Google在2019年在Android系统上引入JetpackCompose声明式UI框架，使用Kotlin语言构建原生应用。JetBrains将JetpackCompose扩展适配并支持了更多ComposeMultiplatform+Unicorn渲染后端•CMP在非Android平台上使用自绘渲染，但是其单线程渲染管线存在性能瓶颈，wcwcWeb研发模式原生研发模式原生研发模式ComposeMultiplatformQkingKotlinQkingKotlinMultiplatformDataDataCompositionLayoutDrawingUIColumn{Column{Skia/Impeller}Skia/Impeller}Title(..)SubTitle(..)Row{Freetype/Harfbuzz/ICUUnicornUnicorn统一渲染后端RasterizationRasterization}}}}}UI}UITreeRenderingNG淘天业务技术第十九届D2终端技术大会二、Weex引擎技术演进淘天业务技术实践中发现，业务逻辑&React框架耗时占比较高有—定的心智负担，如果不加优化，很容易写出性能较差代码React框架C++化探索尝试在C++层直接bindingreact和react-dom对等接口可直接调用C++DOMAPI，直接操作底层数据结构仅保持API行为—致，渲染逻辑并不相同（接近Hydarte）前端框架原