从0开始，打造腾讯自研的跨端&动态化框架

如果无法正常显示，请先停止浏览器的去广告插件。

1. 从0开始，打造腾讯自研的跨端&动态化框架 lingtonke(柯灵杰) 腾讯12级工程师腾讯动态化框架中台PMC

2. 1. 跨平台技术演变与实践目录 2. 打造高性能自研内核 3. 探索新型动态化框架 4. 应用场景&未来挑战

3. 01 跨平台技术演变与实践

4. 跨平台框架技术的演变 Microsoft 桌面端跨平台移动端跨平台 Microsoft QT JAVA wxWidgets Flutter AMP PWA Xamarin Facebook React Native Appcelerat or GTK+ Xamarin Hippy 小程序 Weex Titanium Adobe PhoneGap

5. 腾讯在跨平台与动态化上的探索过去：探索现在：并存未来：融合&创新性能、一致性自研体验 Hippy React Native 生态动态化 Flutter MXFlutter

6. 其他UI框架框架层内核层 Hippy MXFlutter 小程序其他工具统一接口原生 NativeUI 自研内核 TDFCore Flutter

7. 02 打造高性能自研内核

8. TDF 整体架构 8

9. Core 目录 Render Engine Platform Render Engine是TDF内核最核心的模块，提供了元素渲染、混合缓存、光栅化、元素查找等核心能力 Support TDFI Debug & Test 9

10. Render Engine RenderObject Root RenderObject组成的RenderTree是渲染引擎的核心输入数据 Container 重绘边界文本框这是文本光标边框文本 Transform Trasnform (文本框) （列表） Container Container Shape Text （光标） Transform Transform Transform MutiChildren MutiChildren MutiChildren （ListItem）（ListItem）（ListItem） Separate TextView 文本框+光标 PictureLayer PictureLayer ListView Transform Transform Transform Transform Texture Text Text Texture Item1 Item2 Item3 图层合成 Root 三角形先混合三角和圆 9CAC92 圆方形 AlwaysNeedCompositing= true 98A897 PictureLayer 先混合圆和方形 PictureLayer AlwaysNeedCompositing= false Picture Layer Transform Transform Transform Transform Layer Layer Layer Layer Picture Picture Picture Picture Layer Layer Layer Layer • • 层级减少5/7 = 71% Transform运算减少5/9 = 56% • 矢量图绘制减少 100% • 总绘制次数减少9/14 = 64% 10

11. Render Engine Cache 多级缓存是Render Engine的重要优化之一像素等价复用 Raster à Offset = Offset à Raster Dirty MarkNeedPaint RenderObj Layer Repaint Boundary Transform Layer Rebuild Raster Cache 视觉等价复用 Picture Layer Box MarkNeedPaint = 光栅化缓存图层缓存 Image Picture Texture 指令缓存缓存纹理超级采样复用耗时(ms) 缩放：不使用超级采样 8 缩放：使用超级采样 6 4 7.1 2 2.3 0 无缓存多级缓存 11

12. Render Engine Pipeline Pipeline是Render Engine的驱动和调度模块 Paint Build Raster 多线程模型支持超流水线设计无锁算法 • 计算元素的大小、位置、布局多缓冲平滑机制 PGO优化设计渲染树 • 将UI元素转换为 RenderTree 排版 • 将RenderObject 合成为Layer • Layer Diff 机制图层树 • Layer复制 • 组装LayerTree • 回传平台嵌入节点相关信息 • 请求Surface 图层合成缓冲队列平台同步指令生成 • 执行GPU指令 • LayerTree转换为 GPU指令执行指令缓冲队列 12

13. Render Engine Embedded Tunnel Hybrid Composition NativeUI和CoreUI混合渲染，是RenderEngine的重要能力 VirtualDisplay Tunnel 高性能方案不支持系统 Hybrid Composition 完备方案 Hybrid Composition （完备方案） Flutter Flutter问题 iOS不支持事件转发产生效果事件无法正常处理特殊设计处理机制支持事件处理 Flutter线程模型不支持同步动画卡顿线程支持线程同步（前面讲了线程模型）动画同步不卡顿没有实体不支持键盘有纹理复制开销卡顿 Virtual Display Tunnel （高性能方案） TDF 不支持方案不好放弃支持独创已经在项目落地性能高、内存少 13 不支持半透明 NativeView

14. Core 目录 Render Engine Platform Platform分装了内核中所有平台相关的实现，为其他模块抹平平台差异提供能力支持。支持iOS、Android、 Windows 、MacOS、 Linux。 Support TDFI Debug & Test 14

15. Core Platform Platform模块提供了内核的跨平台封装，对外提供一致的接口 PlatformAndroid 五平台支持 iOS、Android、Windows、MacOS、Linux Platform 平台接口高度平台抽象化设计 Headless模式支持 PlatformIOS Render Engine TDFEngine.java TDFEngine.mm GraphicContext 渲染环境 Driver 时钟驱动 Support Shell Service …… …… 平台默认实现 Platform EmbeddedView 平台嵌入UI元素支持 Clipboard 剪贴板 Lifecycle 程序生命周期管理 Keyboard 键盘支持 Output 对外图像输出 View UI控件 PointerEvent 触控事件 Driver Output VSync FixedInterval Screen Texture 垂直同步驱动固定频率驱动渲染上屏渲染到纹理 15

16. Core Platform 驱动垂直同步渲染垂直同步 BackBuffer Core Screen BackBuffer 垂直同步驱动器图像撕裂离屏渲染平台输出键盘控制 Vsync Driver 触摸事件 Pipeline Output 上屏渲染嵌入式UI控件剪贴板图形渲染环境 …… MarkedRange Event 这是文本 Cursor 16

17. Core 目录 Render Engine Platform Support模块提供内核中其它辅助能力，比如手势、动画、物理等等 Support TDFI Debug & Test 17

18. Core Gesture 手势模块处理原始手势到语义化手势的转换，并解决手势冲突常规场景一般不需要使用手势组 Win Move Tap Pan Swipe Pan Add Down Tap Pan Swipe 原始事件封装语义化手势支持 Arena Win Up Tap Pan Swipe Tap 手势竞技消歧机制手势组支持地图、图片查看器等场景需要多种手势响应 GestureGroup Win Move Tap Pan Pan Pinch Pinch Add Down Tap Pan Pinch Arena 18

19. Core Animation & Physics Tween<T> 动画控制动画描述 Controller Animation Animation<T> Curve<T> Lambda AnimationSet Binding<T> Object.Prop 动画组动画曲线交互式动画基于Lambda捕获动画解耦 =1 临界阻尼 <1欠阻尼 >1过阻尼 ω n ：固有频率 ζ：阻尼比 c ：阻尼系数 k ：劲度系数物理支持 Leading Offset 摩擦减速 FinalOffset Tailing FrictionCalculator ScrollView 物理学模型 Leading Offset 粘性阻尼 SpringCalculator Tailing FinalOffset 19

20. Core 目录 Render Engine Platform Support TDFI（Tencent Dynamic Framework Interface）是整个TDF内核的对外接口层由于模块解耦设计，内核各个模块的关联都在这里完成，并对外提供公共接口 TDFI Debug & Test 20

21. Core Shell PlatformAndroid Shell是内核对外接口和胶水层为什么要设计Shell 如果没有Shell会怎么样 Shell将多个具有独立功能的模块组合成具有完备功能的内核 PlatformIOS Platform 平台接口 Render Engine TDFEngine.java TDFEngine.mm Support Shell Service …… …… 平台默认实现 Driver Output VSync FixedInterval Screen Texture 垂直同步驱动固定频率驱动渲染上屏渲染到纹理 21

22. Core View 命令式框架声明式框架 UI Create Layout UI Notify Update Animation C++ View RenderTree LayerTree GPUCommand Update Update Create Notify C++ DOM Tree Layout 客户端命令式+模块分离 JS ElementTree Web Flutter 声明式+模块分离声明式+万物皆Widget 设计 React \ Vue 理念 Hippy 22

23. Core 目录 Render Engine Platform TDF内核处理基础的能力，还为调试和测试提供了深层次的额外支持。相比NativeUI提供的数据更加精准、实时、丰富。 Support TDFI Debug & Test 23

24. Core 渲染指令快照 Debug & Test & Service RenderTree 渲染指令快照渲染树查看内存监控性能监控录制 & 回放虚拟环境下的UI测试 UI测试加速 Snapshot结构化指令渲染树查看 RenderTree PropTree 静态反射 … 内存监控外部事件系统事件触摸键盘 Render Engine Driver 驱动加速 Playback Support Shell 性能监控 Service 事件转发 …… Recorder 内核底层模块自动化测试系统深层次数据 Platform 虚拟平台环境 24

25. Core 应用场景独立跨端、UI框架 TencentOffice内核借助TDF内核提供的Component基础UI组件，腾讯文档将升级为TencentOffice，加强在多结合排版、手势、动画、渲染模块，形成可端原生能力上的投入。TDF内核提供了强大以独立使用的UI框架 Hippy内核升级的底层能力支持，为业务保驾护航后台渲染支持通过将Hippy内核及C++DOM树对接到TDF内核，借助TDF内核跨平台能力，及多平台渲染一实现Hippy从NativeUI到自渲染UI的升级，使得接致性，实现后台渲染支持。在预览图生成，入后hippy可直接运行在PC平台上文档离线渲染方面，有重要作用 25

26. Core 应用场景独立跨端、UI框架 TencentOffice内核借助TDF内核提供的Component基础UI组件，腾讯文档将升级为TencentOffice，加强在多结合排版、手势、动画、渲染模块，形成可端原生能力上的投入。TDF内核提供了强大以独立使用的UI框架 Hippy内核升级的底层能力支持，为业务保驾护航后台渲染支持通过将Hippy内核及C++DOM树对接到TDF内核，借助TDF内核跨平台能力，及多平台渲染一实现Hippy从NativeUI到自渲染UI的升级，使得接致性，实现后台渲染支持。在预览图生成，入后hippy可直接运行在PC平台上文档离线渲染方面，有重要作用 26

27. Core 性能 Flutter TDFCore Flutter UI：2.4ms Raster：2.9ms TDFCore UI：1.5ms Raster：2.3ms 性能：1.6倍性能：1.3倍 UI&渲染耗时（ms） 4 3 2.9 2.4 2.3 1.5 2 1 0 UI Raster Flutter TDFCore 27

28. Core 接入Hippy后性能测试首屏耗时(s) 渲染耗时(ms) 4 3.42 3 2 2.26 1.37 2.93 1.92 4 3 2 1.08 1 1 0 0 高端机中端机 NativeUI 低端机 TDFCore 8.7 7.1 10屏 20屏 NativeUI TDFCore 1.37 2.93 1.92 1.08 高端机中端机首屏耗时下降 14.3% 19.8 17.4 2.26 NativeUI 内存增量(MB) 25 20 15 10 5 0 3.42 低端机 TDFCore ~ 21.1% 渲染性能提高 1.6 ~ 4.5 倍内存增量下降 1.5 ~ 2.4 倍手机：三星 S8、小米 8、一加 8(高帧) 业务：手Q小世界 28

29. TDFUI 探索新型动态化框架为什么要打造新型框架 01 RN、Weex等基于JS的方案已经是上一代技术了 02 JS底层过于复杂，各平台实现不一致，问题难以定位 03 声明式、命令式生态割裂严重 04 动态化能力和执行性能难以兼顾 05 各种语言框架、生态差别大、难以统一 06 原来缺乏底层技术支持，造轮子ROI低风险大而现在有了TDFCore 基于TDF内核打造的新型框架难点&挑战 29

30. TDFUI 架构 TDFUI Application Runtime Interface UI Interface WASM Compiler LLVM 多语言支持 ASM VM \ AOT支持 WASM VM Runtime 应用层 JS Compiler 虚拟机层 JSC/V8 UI 无埋点函数级动态化 Foundation Interface JSC/V8 Foundation Runtime层内核 Core JS兜底动态静态混合，兼顾性能&动态性 Dart JS TypeScript (subset) C++ C# Rust …… V8/JSC Compiler WASM Interpreter TDFCore Compiler ASM 30

31. TDFUI 函数级动态化动态化函数重定向 VM VM FTable ASM 多语言支持 VM \ AOT支持无埋点函数级动态化 JS兜底动态静态混合，兼顾性能&动态性 ASM 无需打点，无需预埋逻辑静态函数调用 (module (func $myfunc (result i32) i32.const 123) (func (export "callfunc") (param $i i32) (result i32) local.get $i call $myfunc ) ) Functiontable间接函数调用 (module (table 1 anyfunc) (func $f1 (result i32) i32.const 123) FunctionTable (elem (i32.const 0) $f1) (type $myfunc (func (result i32))) (func (export "callfunc") (param $i i32) (result i32) local.get $i call_indirect $myfunc ) ) 31

32. TDFUI 语法 & 性能无损设计命令式写法支持 a1 = Widget(); a1.value = 1; b1 = Widget(); b1.value = 2; c1 = Widget(); a1.value = 3; a1.addChild(b1); b1.addChild(c1); 声明式写法支持语法正交性声明式 & 命令式支持生态融合声明式描述重建 Widget( value = 1, child = Widget( value = 2, child = Widget( value = 3 ) ) ); 元素重组两种写法下的性能无损设计 Widget A1 Widget A2 View A Widget A View A value = 1 value = 1 value = 1 value = 1 value = 1 Widget B1 Widget B2 View B Widget B View B value = 2 à 5 value = 5 value = 2 value = 5 value = 5 Widget C1 Widget C2 View C Widget C View C value = 3 value = 3 value = 3 value = 3 value = 3 命令式直接操作 32

33. TDFUI 跨语言继承链 & 多虚拟机 & 虫洞 TS WASM VM Cpp SetFrame CppInvoke SetFrame SetFrame View BridgeView View Layout Layout Layout TSInvoke 跨语言继承链多虚拟机支持虫洞 View-0 VM-0 View-1 VM-1 View-2 VM-2 Core View-3 1 VM 2 VM 新增一个虚拟机环境仅需 4.63MB 33

34. TDFUI 性能 Fib40 Without JIT(ms) 13658 15000 10000 4416 5000 370 0 NativeC 体验接近Native Wasm 运行效率高 JS FuncCall(us) 75936 80000 高性能互相调用 60000 不需要独占线程 40000 24080 20000 1 0 JS Call Cpp 1 VM 2 VM 5 Wasm Cpp Call 函数调用性能： WASM大约是JS的两万倍测试手机：iPhone12 性能是JS的 3.1倍虚拟机占用内存 <5MB 34

35. TDF 挑战&展望未来大家都在基于Flutter的时候我们在打造新的框架和内核在基础框架领域发出中国人的声音今年下半年在腾讯内部项目试点预计年底至明年初开源期待与大家相遇站在巨人的肩膀上，我们能做的更好规模大超过30个大型模块，数百个小型模块领域多深入数十个不同细分领域周期长需要持续多年投入才能有产出门槛高多名T13、T12级专家带队大量T9以上工程师投入开发难保障质量，每人每天输出少量高质量代码配套多包含平台、框架、工具、文档等配套设施 35

36. 感谢倾听大会官网