1. 腾讯跨平台&动态化开发框架 演进之路 Lingtonke（柯灵杰）

2.

3. CONTENTS 跨平台技术演变 腾讯的跨平台实践 打造自研跨平台框架 应用场景&未来&挑战 跨平台技术在业内的演变，价值， 现状。 腾讯在跨平台技术上的发展路线、 探索、实践、成果 为什么要打造自研跨平台框架？ 如何打造？现有框架如何融合？ 未来的价值，应用场景，面对的挑 战和后续的规划

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

5. 从跨平台到动态化 Q1 提高研发效能 不管是跨平台技术、还是动态化技术，本质 上是为了提高研发效能 2次迭代 Q2 持续部署、持续交付 动态化能力为客户端提供了持续部署和持续 交付的能力 4次迭代 Q3 加快迭代速度 具有持续交付能力之后，最大的收益是提高 了迭代的速度 Q4 实现数据驱动 高速的迭代速度及方便的A/B实验能力，是 数据驱动的基石 5

6. 从跨平台到动态化 1个月版本 周期 等待版本节奏 评审5D 用户反馈 审核周期 开发20D 测试5D 0~无穷 （甚至不更新） 审核2D Q1 提高研发效能 不管是跨平台技术、还是动态化技术，本质 上是为了提高研发效能 用户更新 Q2 持续部署、持续交付 动态化能力为客户端提供了持续部署和持续 交付的能力 按版本交付 持续交付 Q3 A 评 审 开 发 B 测 试 评 审 部 署 开 发 C 测 试 评 审 部 署 开 发 D 测 试 评 审 开 发 E E等待排期 17D 发布 A 随时发布 部 署 测 试 评 审 开 发 OR 版 本 部 署 测 试 部 署 发布 ABCED 动 态 化 基于版本：传统月版本模式 0~30 +30 +2 = 34~64D or 加班插需求 （等待版本节奏） （版本周期） （审核） （等待排期） +6 （评审、开发、测试） +0 （审核） 具有持续交付能力之后，最大的收益是提高 了迭代的速度 +N （更新，按2算） 基于动态化：持续部署、持续交付 0~17D = 6~23D 加快迭代速度 +0 （更新） Q4 实现数据驱动 高速的迭代速度及方便的A/B实验能力，是 数据驱动的基石 6

7. 游戏引擎 VS UI引擎 为什么不用 游戏引擎做UI？ 01 刷新方式：全局刷新 VS 局部刷新 02 更新机制：实时更新 VS 标脏机制 03 渲染缓存：无缓存 VS 多级缓存 04 内存占用：大 VS 小 05 运行功耗 ：高 VS 低 06 UI组件：少 VS 多 7

8. 行业现状 Microsoft Facebook Adobe 原生 RN Xamarin 编译 解释 Web Flutter PWA AMP Xamarin React Native PhoneGap Appcelerator Flutter 绘制 Hippy 小程序 MXFlutter Weex Titanium 8

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

10. 早期 Hybrid 实践及遇到的问题 1 2 线程问题 异步加载，白屏，响应不及时 性能问题 运行性能差，通信性能差，体验天花板低 Hybrid 3 离线问题 默认只支持在线浏览，离线需要改造，体验 不好 4 生态问题 客户端生态、Web 生态不一致 10

11. 从 Hybrid 到 React Native 再到 Hippy ——Web前端生态的变革 • • • • 基于 WebView 浏览器内核不可控 不支持离线 无法和原生控件混合 • • • • • 基于 Native 更高性能 开源内核 支持离线 可以和原生控件混合 • • • • • • • 无协议风险 同时支持 React / Vue 首屏直出 支持分包加载 支持局部更新 包体更小 C++ 排版引擎，性能更高 11

12. Flutter 与 MXFlutter ——客户端生态的变革 • AoT跨平台 • 一致性好 • 开发效率高 Dart Widget Flutter JS Widget • 动态化 • JS2Dart • 迁移成本高 MXFlutter(JS) • Dart2JS 工具 • 动态下发 Dart • 迁移成本低 Dart Widget MXFlutter(Dart) 12

13. 打造腾讯自研跨平台动态化框架 TDF View 生 态 TDF Widget TencentOffice Hippy 小程序 MXFlutter 其他领域 + 底 层 AppCenter Core DevTools 平台 内核 工具 13

14. 打造高性能的跨平台渲染内核 兼容多种生态的架构 灵活快速渲染树结构 支持前端、客户端多种生态，为不同需求 多级分层树结构，在充分满足渲染能力需求的 提供完善的底层支持 情况下极致压榨性能 自优化的超流水线设计 智能高效的缓存结构 采用PGO优化、多阶段并行超流水线设 TreeCache、L2 CommandCache、 计，进一步释放硬件潜能提高性能 L1 RasterCache。多级缓存为性能保驾护航 健壮的内存和线程模型 全面有效的质量保障 稳定精确的线程调度策略，结合内存持续监控及布 内存监控、线程检测、设计先行、高覆盖率单 局分析，保障内核整体的稳定性 元测试、结对编程、多轮CR，保障质量 14

15. 兼容多种生态的框架设计 TDF研发运营平台 AppCenter Build Test React/Vue Framework 框架层 蓝盾 Devops MXFlutter Hippy Flutter Diagnostics Store Issue Release Symbols Code Push AB Test HippyCore Account Overview Profile Events Permissions Log Billing XML/CSS Widget / View TDF研发工具链 Inspector Dart2JS JSCore/V8 WASM Memory Monitor Native UI JSWidget Flutter Engine TDFI Engine TDFI Browser VM / AOT TDFI ElementTree TDFI RenderTree Debugger TDFI（Tencent Dynamic Framework Interface） Remote Debug Analytics 自研UI Timeline Taitank Layout Distribute 小程序 Shell Core 内核层 Component Support RenderEngine Service Platfrom Pipeline Diagnostics Gesture Base Task Runners RenderTreeBuilder（Layout） Animation GPU Physics IO Test RenderTree LayerTree Cache Platform EmbededView LayerTreeBuilder Layer AppWizard Debugger Render UI Flow Rasterizer L1 RasterCache L2CommandCache Reporter Monitor Log RPC Driver Updater 15

16. 灵活快速渲染树结构 声明式UI框架 命令式UI框架 TDF View Create Animation Update Layout TDF Widget Flutter Widget Notify Update Component RenderTree LayerTree GPUCommand Update Create Notify C++ DOM Tree Taitank Layout JS ElementTree 客户端 Web 命令式+模块 分离 Flutter 声明式+万物 皆Widget 声明式+模块 分离 设计 React \ Vue Hippy 理念 16

17. 自优化的超流水线设计 Build —— 流水线流程 Paint Build • 计算元素的大小、 位置、布局 排版 Build Paint 渲染树 • 将UI元素转换为 RenderTree • 将RenderObject 合成为Layer • Layer Diff 机制 图层合成 Build Paint Raster Paint Raster Raster Raster 图层树 • Layer复制 • 组装LayerTree • 回传平台嵌入节 点相关信息 • 请求Surface 平台同步 指令生成 • 执行GPU指令 • LayerTree转换为 GPU指令 执行指令 17

18. 自优化的超流水线设计 —— PGO（ Profile-guided optimization ）：让程序自己优化自己 运行策略 RenderTree 收集信息 Copy Multi-threaded Diff Single-threaded LayerTree 根据信息 优化策略 18

19. 智能高效的缓存结构 TreeCache 通过节点合并、渲染树diff，实现局部更新逻辑。减少页面刷新 耗时，提高效率 L1 RasterCache 渲染节点具有保存纹理缓存的能力。 对于没有发生变化的节点，优先使用纹理缓存，最大幅度减少UI、 GPU开销 L2 CommandCache 渲染节点具有保存指令缓存的能力。 在RasterCache不命中的情况下，复用之前生成的渲染指令，一 定幅度减少开销。 19

20. 健壮的内存和线程模型 01 每个函数恒定执行线程 02 跨线程函数专有命名规范 03 Debug模式线程正确性检测 04 大量无锁算法应用 05 支持ABA线程模型、ABC线程模型切换 06 无裸指针使用、内存自动监控 RenderEngine Pipeline Task Runners RenderTreeBuilder（Layout） Render RenderTree UI EmbededView LayerTreeBuilder GPU IO HitTest Layer LayerTree L1 RasterCache Cache Platform 内核——渲染引擎 Rasterizer L2CommandCache 20

21. 全面有效的质量保障 ——研发流程 合流完成 代码编写 • 编写功能代码 • Public接口注释覆盖率100% • 单元测试覆盖率75% • DevOps流水线二次验证，失败回滚 • 每日全量用例自动化测试 • 性能测试、生成报告 发布 合流验证 概要设计 • 文档编写：架构图、流程图 • 结对审阅 • 负责人审阅 • DevOps流水线检查（代码规范、圈复杂度、单测覆盖 率） • 结对代码CR • 负责人CR • DevOps流水线编译、验证 • 全量用例自动化测试 • 性能测试、生成报告 • 关键功能人工CheckList • 线上监控告警，自动回滚 21

22. 全面有效的质量保障 ——系统、质量保障 内存监控 线程检测 变异测试 线程数量检查 函数线程检测 线程压力测试 22

23. 性能测试 Flutter TDF Widget+内核 23

24. 性能测试 Flutter 2.8ms VS 1.6ms TDF Widget+内核 耗时减少40% 24

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

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

27. 谢谢大家 Lingtonke(柯灵杰) 腾讯动态化框架中台PMC

28.

29. 腾讯跨平台&动态化开发框架演进之路 扫描二维码 提交议题反馈