从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. 感谢倾听 大会官网

首页 - Wiki
Copyright © 2011-2024 iteam. Current version is 2.128.0. UTC+08:00, 2024-06-15 08:37
浙ICP备14020137号-1 $访客地图$