跨端开发，也可以这样玩

1. 跨端开发，也可以这样玩腾讯游戏社区跨端开发实践 skindhu IEG用户发展中心前端开发组Leader

2.

3. 目录 1. 传统研发模式的痛点与蜕变 2. Voltron的设计哲学 3. 性能守护的求索路

4. 01 传统研发模式的痛点与蜕变站在巨人的肩膀上

5. 腾讯游戏社区业务形态原生页面 Hippy页面 H5页面复动杂态交运互营场场景景

6. 抽丝剥茧：一个App的技术构成痛点分析复杂交互场景，双端Native开发太消耗人力动态运营场景，Hippy开发人力还是『 1+2 』组件层的性能取决于双端各自实现，统一优化成本高若要支持桌面端，得从“0”做起新目标：高效率 + 高性能 + 动态化 + 多端运行

7. 大道至简：技术架构的华丽蜕变 Voltron 取自小时候的动画片《战神金刚》，意指多种方案的完美融合 JS跨平台能力动态化热更新现有Hippy页面0成本切换 Flutter跨平台能力 UI双端一致性和高性能 JS扩展能力只需一端实现 C++跨平台能力逻辑多端一致性和高性能高效率：三种跨平台技术方案的完美融合动态化：JS动态化与前端生态高性能： Flutter渲染层与C++组件逻辑层的融合多端运行：桌面端适配成本低

8. 02 Voltron的设计哲学实践出真知

9. C++跨端开发的尴尬 Dropbox放弃C++跨端开发 https://dropbox.tech/mobile/the-not- so-hidden-cost-of-sharing-code- between-ios-and-android 不同平台编译器差异语言特性复杂纯c++跨平台开发成本非常高胶水层繁琐

10. VoltronCrossing的设计目标

11. VoltronCrossing框架设计设计理念：分层架构，易测试，易扩展，易插拔，丰富的接口层让组件灵活易用

12. VoltronCrossing – 统一规范与工具语降低Debug成本 Modern C++ 统一标准与规范言 l 采用C++17标准 l Lint强制代码规范 l 单元测试覆盖率80% 特性接入GTest 代码规范接入内存检查 Adress Sanitizer 复杂代码检查平台无关桌面端（Windows，Mac）支持跑单元测试、断点调试、内存检查

13. VoltronCrossing – 抹平平台和编译器差异 1. 优先基于Clang编译器，若需要MSVC再做额外适配 2. 优先使用高版本c++标准库（c++ 11之后），尽量规避使用平台相关库 3. 若必须使用平台相关能力，则做好适配层，屏蔽不同平台的差异

14. VoltronCrossing – 胶水层的烦恼 Android JNI编写成本处理JNIEnv 注册NativeMethods 查找jclass和method 参数类型转换反射调用 JNI线程切换 Dart FFI编写成本 ListenPort监听回调注册NativeMethods 参数类型映射 Dart_PostCObject 胶水层步骤繁琐，充斥着大量重复的模板代码，且需要开发者显示关注线程切换、内存的分配与释放等操作，极易写出坏代码内存的分配释放

15. VoltronCrossing – 胶水层的优化优化思路：设计一套胶水层框架，通过模板技术将Dart/Java与C++对象能自动映射起来，业务侧只需要声明即可，将繁琐的方法查找，类型转换、线程切换等逻辑收敛在框架内自动完成 Java C++ Class Account { public long uid; public String openId; public void parseUserInfo(String json){} const char kAccount[] = “com/crossing/Account” Class NativeAccount : public JITObject< kAccount > { ObjectField<int64_t>uid{this, "uid”}; ObjectField<std::string> openId{this, “openId”} JavaMethod<void(std::string)> parseUserInfo{this, “parseUserInfo”} } } 平台上下文托管类自动注册声明式编程稳定性保障

16. VoltronRender - 前世 Hippy、Weex、RN的本质都是通过虚拟DOM操作链接JS内核和平台能力平台相关 JSEngine vDom DomManager v8 JSFramework DomTree Android callNative RenderTree FlexBox JSCore iOS callFunction 成本开发成本维护成本一致性成本 PlatformRender

17. VoltronRender - 今生复用Hippy JS Framework，业务侧切换 0成本提供代码热更，运营动态化能力提供引擎通讯和布局能力 FFI替代MethodChannel，提升通讯效率 Flutter保障跨端一致性，一人开发，多端运行丰富的组件生态让研发成本变得极低

18. VoltronRender - JS Framework增强增强项兼容Hippy全部组件和样式，并在样式属性检测、动画和调试能力等方面增强

19. VoltronRender - JS Framework增强样式属性增强智能提示自动剔除多样化动画 transition animation 调试工具 element调试 network调试插件拓展调试多端统一调试

20. VoltronRender - 属性样式检测 1 问题 a. 疑惑样式使用时需要查文档，效率不高 b. 无用样式传递到终端无法解析，无效传输 2 解决方案 (CSS AST Tree校验) a. 智能信息提示 • display: fixed 一目了然，提高效率 b. 自动剔除无效属性 • 减少不必要的数据传输 .info-box *

21. VoltronRender - JS Framework增强样式属性增强智能提示自动剔除多样化动画 transition animation 调试工具 element调试 network调试插件拓展调试多端统一调试

22. VoltronRender - 多样化动画跨端框架动画能力对比 1 问题 a. 动画能力不全，主要是animation动画 b. 没有完全遵循W3C标准，有学习成本 c. 双端渲染不一致，体验差异 2 解决方案如何形成连续动画 transition 传递形成 animation 前端动画属性 VoltronRender Flutter层（W3C的标准能力复杂）（transition和animation的竞争协同处理）

23. VoltronRender - 多样化动画 2 解决方案 VoltrenRender JS层前端解析层检测和拆分动画属性 a. W3C标准化 b. 学习成本低过滤无效属性 VoltrenRender Flutter层 c. 可维护性高 d. Lottie动画扩展转换层、监听层、合成层获取动画播放序列通过决策树处理属性竞合渲染层逐帧播放动画序列独立图层和离屏重排

24. VoltronRender - 动画渲染优化 2.1 动画渲染层页面刷新触发动画节点样式更新触发计算帧值 CSSLayout 生成触发具有一定计算耗时，容易引起掉帧页面刷新，计算帧值，更新动画节点样式，触发布局计算，更新渲染节点，生成动画 RenderTree update 如何减少掉帧？

25. VoltronRender - 动画渲染优化 2.1 通过属性计算和布局分析，避免无效的布局计算，减少掉帧 ① 属性过滤 ② 布局分析位置属性动画节点 ③ 计算渲染 ① 非独立图层动画帧值置脏计算 ② 独立图层动画帧值重绘渲染非位置属性帧值直接渲染位置属性帧值布局计算

26. VoltronRender - 动画渲染优化 2.1 特殊场景的性能热点 a. 按照前端动画优化规则，独立图层编写动画 a. 编写的动画没有按照优化规则，会引起整个页面重排 60fps 50fps ✅ ✅ 多样性Animation动画 Flex布局，元素A宽度变化的Animation动画 60fps ✅ 多样性Transition动画特殊场景能继续优化么？

27. VoltronRender - 动画渲染优化 2.1 特殊场景的性能优化 ① 动画位置属性关键帧，提前离屏 CSSLayout重排 ② 对比节点前后变化值，获取位置关联节点 ③ 位置关联节点，提前加上位置动画提前离屏重排N个关键帧，避免实时逐帧计算动画位置属性为关联的位置变化节点添加动画，避免渲染时发生重排计算 60fps ✅

28. VoltronRender - JS Framework增强样式属性增强智能提示自动剔除多样化动画 transition animation 调试工具 element调试 network调试插件拓展调试多端统一调试

29. VoltronRender - 调试工具增强缺少重要的UI和网络调试 1 问题 a. 调试模块，功能不全 b. 双端调试，效率不高链接 V8 链接 JSCore 痛点如何解决？

30. VoltronRender - 调试工具增强 2 解决方案 V8 JSCore a. 统一使用Chrome调试 b. 协议适配层实现通用能力 c. 如何实现个性化能力？ VS IWDP (ios-webkit-debug-proxy)

31. VoltronRender - 调试工具增强 2 拓展插件功能模块 a. 工程化配套脚手架，开发便捷 b. 自定义插件拓展，丰富调试能力 ChromeDevTool RenderTree节点查看

32. 03 性能守护的求索路让性能问题无处可逃

33. 性能守护的设计目标开发阶段开发守护测试阶段测试守护集成阶段合流守护 Voltron Protector 实时提示录制回放集成守护提前暴露性能问题合流检测性能健康度评估

34. 工欲善其事，必先利其器 VoltronProtector ! " # $ % & ' ( ! " # $ % & # $ 内存页面加载耗时 CPU FPS 绘制边界大小网络异常检测网络频繁检测方法耗时检测 MethodChannel 无回调检测大图检测内存泄露检测

35. 实时问题提示

36. 合流性能检测录制合流前置检测特性分支行为数据录制 FeatureBranch 状态数据录制合流前置准备行为数据回放开始合流状态数据还原性能指标检测账号数据网络数据本地数据内存泄露内存峰值网络异常网络请求频繁大图方法耗时过长检测通过，自动合入主干主干 Develop 检测失败，修复问题后重新检测

37. 持续健康度评估

38. 一套代码，多端运行 Android && iOS Mac Windows

39. 感谢倾听大会官网