App 研发效能提升和性能优化实践

1. 多架构下的移动中台设计和实践郭伟 2022.8.17

2.

3. 郭伟 TMF产品技术负责人经历过华为，腾讯，腾讯9年鹅。干过后台、客户端、前端技术栈近年来耕耘在安全、质量和效率相关领域的田野间

4. 目录移动中台建设背景移动中台建设思路移动中台落地实践总结与展望

5. 01 移动中台建设背景

6. 腾讯内部App生态娱乐社交腾讯办公 APP数量繁多，业务内卷严重 APP 100+ 安全内部生态门类内2至4Team并行赛马公益 ...

7. 腾讯内部App生态 App架构 10%- 老年App，历史债务较重的App。多数在向Hybrid和跨度架构演进跨端 RN 纯NA Flutter Hybrid 小程序 60%+ 中青年App，混合H5和小程序的App 20%+ 青年App，或明星App的重构版

8. 研发人员困境研发小哥痛点因内外业务压力要求尽快推进业务功能研发，但研发人员能用于开发的时间通常仅有40%～70% 研发小哥或更少。痛点来源 1、早期部分团队喜欢只招研发，其他工种工作研发尽量覆盖，长期形成惯性 2、边界灰色工作或者未赋能出去的工作，最终还是研发闭环 3、沉淀较少，人工执行工作较多项目经理：老板说对面已经发布了xx，我们太慢了客服：某机型用户说某页面打开有时候卡顿，有时候又好了，怎么回事？产品：帮忙发布个xx，帮忙统个数据，帮忙分析下xx 测试：大佬帮忙配置个xx环境

9. “杂事”有哪些 10-20% 流程20%～30% 研发流程过深参与，例如提测、发版等。 20-30% 20-30% 工具10～20% 排障20～30% 踩坑10%～20% 疑难杂症，根据各方反馈的内部或者第三方SDK，质量现象，在线或者离线联调。较低，重复踩坑，接入联调帮助统计各种临时数据。 10-20% 耗时。研发小哥：天天打杂，但我想写代码。质量20～30%

10. 原始的初衷集合开发流程工具集，建设中台减少杂事，效率质量一起提升使业务研发回归本位，更多精力专注创造性研发工作

11. 为什么要建设“一个”中台业务痛点： 1、解决一个业务架构需要一个对应中台，单团队多架构场景下，需要熟悉并接入多个中台，跨中台增加业务团队负担 2、App架构升级，例如从NA转向小程序，原有中台难以支持，可能需要业务团队适配不同中台。纯NA Hybrid 跨端监控&日志监控&日志监控&日志发布发布&热更发布&热更 … … … 统一框架组件各组件抽取各框架公共部分统一中台 3、不同中台组件级差异，业务可能需要选择监控&日志和拉通，甚至需要容忍。发布&热更框架差异 … 框架共性技术架构增加额外认知成本，成为新种类“杂事”

12. 移动开发平台全览：覆盖研发运营全生命周期运营分析&优化业务运营电商/内容/权益用户/渠道/页面活跃/流失 A/B Test 智慧投放能力场景框架组件跨端 X5浏览器移动中台国密库离线包热修复支付/钱包权益商城智能客服数字人监控分析 API治理移动监控基礎組件高可用消息推送数据同步移动分析 UI组件基礎組件灰度环境检测伪基站检测安全信道 SDK沙箱组件库移动推送、投放移动发布应用发布基礎組件更新直播/点播移动网关小程序容器安全业务组件源码混淆盗版检测研发效能 DevOps 代码质量研发规范测试云真机自动化功能、性能、兼容性服务开发支持质量评估恶意WiFi 检测

13. 02 移动中台建设思路

14. 研发框架建设思路通过建设工具，加快环内流转，提升整体效率监控分析研发质量提升开发/调试发布 • • • • 统一ID 质量度量质量分析日志 • 统一ID • 灰度发布 • 热更框架运营组件复用投放 • • • • 研发架构开箱即用的集成框架组件库研发驱动的UI库 • 统一ID • 标签投放 • 活动/消息投放 • 统一ID • 埋点上报 • DEM

15. 研发框架图业务模块/ 小程序矩阵 IDE 统一路由 /接口容器层首页财富 LBS 扫一扫 OCR WK X5 其他业务条线直播其他网络 RN 容器安全其他小程序组件库框架 CI CD 账户信息统一ID 容器管理组件管理 UI组件库数据存储 OCR IM/会议回溯热更新分布监控日志扫一扫 LBS 人脸核身直播虚拟空间推送/投放分析 … 其他分享键盘网络 AR 其他 APP Shell 规范

16. 研发框架图 Hybrid 小程序 APP H5 View 业务逻辑 Service WXML JS JS HTML/CSS WCSS Bind Event 小程序容器 Web View 容器容器 (可选) API库(JS/Flutter) 渲染引擎(JS/Flutter) JS引擎/Flutter Widget JS Bridge Method Channel/JS Bridge Call Native 公共组件组件库（JS/Flutter） JS引擎渲染引擎 WK/X5 Set Data Native 组件库 Call Native Native 组件库 JS Core/X 5 Flutter

17. 为什么先讲质量痛点： 1、内部生态仍有大量业务没有接入质量组件 2、App使用新架构，原有中台没有对齐的质量组件，新挑战不断模拟复现法但是… 先上线，有问题再说代码分析法局部屏蔽法没日志用户教不会难必现类比法排除法二分搜索法分析日志法逆向分析法 Hook 说服自己放弃堆栈分析法说服别人放弃大数据分析法提前崩溃法

18. 质量Step1:度量和SLI设计业务层业务埋点数据、自定义日志、染色日志 PV、UV、用户行为、用户事件分析、用户自定义分析容器层 JS日志 JS Error监控原生层堆栈日志、系统信息 CPU、内存、磁盘等监控分层定义指标，设置告警阈值，输出告警+日志

19. 质量Step2:架构、数据和模型分离各架构独立日志埋点，分析过程分离数据处理和模型，形成统一告警各App架构模型业务首屏打开时延掉帧 Crash 卡顿内存泄漏电量电量内存触顶 JS ERROR 其他卡顿其他日志系统数据统一告警容器原生

20. 质量Step3:性能优化案例库优化案例库，梳理框架差异磁盘耗电量内存流畅度举网络响应时延例磁盘案例x：建表使用autoincrement声明框架：通用 CPU 原因：Sqlite维护自增长ID需新维护sqlite_sequence内部表，使框架差异得插入业务表操作耗时为无autoincrement的两倍解决方案：非必要，勿使用autoincrement

21. 质量Step4:日志获取可观测性：监控结果（现象）+日志，回传分析。 App/小程序  自定义上传策略  日志压缩业务日志 JS日志日志SDK 网关日志系统日志存储系统日志分析系统系统日志

22. 质量Step5:日志分析

23. 统一网关需求支持App框架支持NA、小程序、 Flutter 接入友好流量纳管统一链路统一SDK路由指定日志回传支持发布、投放、推送安全、信创、国密优秀的网关对于质量、效率提升明显性能友好低延迟低资源需求

24. 网关性能方案对比半长连接网络协议基于TCP长连接心跳包保持(可优化) 短连接基于HTTP的短连接流量流量较小流量较大弱网相对较好相对较差连接保持较久连接释放快连接建立次数少连接建立次数多连接保持阶段无需解析依据本地DNS缓存减小解析数会话建立少，会话建立相对较多，密钥协商次数多密钥协商次数多业务场景全满足不满足推送架构小程序不满足全满足后台高可用实现较难，CAP问题实现简单，C要求低连接建立速度 DNS解析通信安全 C++ VS Java C++性能提升30%以上

25. 统一网关框架连接客户端与服务端，简化数据协议和通讯协议，实现前后端分离，提升开发效率和网络通讯效率日志、指令开关、推送、投放、发布、业务SDK 网络 SDK(RPC) TCP/ HTTP 基础模块安全通道密钥交换长连接保持信息控制灰度策略统一ID 数据加解密移动网关控制台连接管理 • 标签 • • • 数据解压缩路由转发 Profile管理业务服务黑白名单 • API治理染色日志指令、开关推送、投放发布

26. 热更方案框架 Tinker | DN Flutter | JS Bindle | H5离线包 | 小程序包架构和框架分离框架沉淀复用热更包下发灰度策略标签更新时机 push通知事件触发主动拉取更新机制下载策略加载时机 Fall Back 整包升级网络策略首次打开 online资源 Diff升级压缩算法二次打开降级

27. 灰度发布少量用户发布，快速试错，快速获取现网反馈灰度发布与管理统一网关 • 自定义标签 • 百分比流量 • 监控分析结果串联推送时间每日时间推送上限统一ID 自定义ID 地区产品版本系统版本机型推送频次网络环境运营商 30% 10% 灰度用户组1 总用户灰度用户组N

28. 研发套件痛点即插即用的工具箱接入简单架构统一业务需求痛点：业务和生态存在较大Gap 生态现状找不到想用且能用的SDK SDK对接方法各异架构多种多样平台建设统一工具箱即插即用接入简单架构统一 SDK难找对接方案各异架构异构组件化引入方法简单各平台功能统一零散分布各处引入难度不一各平台功能不一获取方法简单部署方法统一获取方法统一可能获取不到部署方法不一获取方法差异大文档清晰 SDK管理简单接口风格统一文档找不到 SDK管理不一接口风格差异大

29. IDE开发工具链调试开发  本地联调，如热更新调试  项目脚手架  跨端调试  SDK、文档快速获取自测体验提测  自动化部署  代码扫描、自动化测试  体验App分发  发起提测流水线

30. 客户端组件框架 • • 能力SDK统一封装，形成统一调用接口，增加复用，减少开发量网络链接统一纳管，通信安全统一处理 TMF组件化开发框架宿主层 APP 01 3 网络架构统一：SDK后台统一接口网关 APP 02 APP 03 APP 04 ...... SDK B SDK A TCP 业务层业务模块 A 业务模块 B 业务模块 C ...... 1 封装基础功能模块 TMF移动开发套件框架层统一网关移动网关 OCR 会议反欺诈 LBS 人脸核身 TRTC 回溯扫码识别 ASR 直播国密套件图片压缩 TTS 远程展业 ...... 注解注解处理器 TMF Core ServiceManager HTTP 后台 A 后台 B 2 接口统一：NA接口和JS/小程序接口分别统一

31. 统一接口规范 NA调用：容器 scheme://module/method/params Webview 小程序容器 fw.get(Iclass).Imethod() fw.startUri(Uri) 接口映射路由映射数据段初始化绑定编译绑定 API Class IMPL Class API Class 数据段初始化绑定编译绑定 Router IMPL Class Page Router Page H5/小程序调用： scheme.method(params) 或 Scheme.module.method(params)

32. 组件运行时共享 APP1(先安装) APPN (后安装) SDK1 SDKN Interface.jar Interface.jar Download 临时用APP1本地兜底方案 CDN SDK1 SDKN Interface.jar Interface.jar Share SDKN Interface.jar

33. 03 移动中台落地实践

34. 落地案例—提升原产品性能助力交行全新升级 • 背景：近几年互联网金融的蓬勃发展让手机银行的体验逐渐成为银行间的较量点。 • 需求：行方高层提出了三点要求一、用户体验提升，页面秒开二、问题压缩，崩溃率下降到行业平均水平之下三、行业权威测评排名进前三【交通银行全新升级手机银行】落地效果及价值  迭代周期从月级下降至周级  快速转型，能力迁移  崩溃率下降一个数量级（x%->1‰）  TMF组件丰富  接入方便  极大加快了产品上线进度 From 交通银行北京研发中心

35. 落地案例—关键举措架构质量 Hybrid 度量监控多团队开发业务解耦 X5内核组件复用网关入口统一 FPS优化、性能优化持续集成 TCP链路改造灰度测试/云真机灰度发布效率

36. 04 总结与展望

37. 总结：质量和效率工具覆盖研发运营全生命周期运营分析&优化业务运营电商/内容/权益用户/渠道/页面活跃/流失 A/B Test 智慧投放能力场景安全直播/点播支付/钱包权益商城智能客服数字人环境检测伪基站检测框架组件跨端 X5浏览器监控分析移动网关小程序容器国密库 API治理移动监控基礎組件高可用移动分析安全信道 SDK沙箱移动中台应用发布基礎組件更新离线包热修复组件库移动推送、投放移动发布消息推送数据同步 UI组件基礎組件灰度业务组件源码混淆盗版检测研发效能 DevOps 代码质量研发规范测试云真机自动化功能、性能、兼容性服务开发支持质量评估恶意WiFi 检测

38. 展望架构质量效率小程序+flutter架构的更多探索更细粒度的覆盖更多效率组件深入组件质量提升UI组件复用自动化 3 8

39. 代码驱动的设计 Code2Design2Code，通过UI组件库渲染设计素材库，设计人员基于基础素材库输出更多模版库设计人员设计素材库开发小哥库(细) 组件库(细) 1 C2D 模版 App集成低码平台或App集成组件库(细) 设计素材库小程序 H5离线包库(细) 2 D2C 投放发布

40. SDK质量监控图片宽度 62cm 统一描述(Yaml)、统一组件上架标准、统一质量度量和SLI 告警报表 3、告警，数据展示 1、上架组件库新接入标准 Component.yaml 组件框架 Kit 2、Metrics SLI注册质量监控日志上报日志分析

41.

42. 感谢聆听相关议题继续畅谈