3、CRN 在携程Android上的应用与实践 储贻锋

Razor

2019/07/03 发布于 技术 分类

安卓绿色联盟 

文字内容
1. 安 卓 绿 色 联 盟 技术 沙龙 第 2 6期 · 走 进携 程 CRN 在携程Android上的应用与实践 携程 无线平台研发部 储贻锋
2. CONTENTS 01 CRN 在携程的使用现状 02 CRN 框架介绍 03 CRN 在Android上的稳定性优化 04 CRN Android 适配
3. RN在携程内部使用现状 13 Apps 104 Bundles 300% PV增长 • 集团内13个App集成RN • 83个在携程旅行App中使用 • 2016-2018PV年化300%复合增长 • 核心App全部接入 • 单bundle超过100个Pages • PV在2018超过H5,达到其2倍 • 8个App纯RN开发 • 核心业务场景使用(机票)
4. CRN框架介绍 开发框架 工具&文档 组件&解决方案 跨平台打通(H5) 代码仓库托管 性能优化 Bundle拆分 框架预加载 首屏性能优化 稳定性优化 发布运维 动态打包配置 发布系统及监控 页面性能监控 线上错误监控 CRN是基于React Native定制,适合携程业务的跨平台开发框架,提 供从开发、发布、运维全生命周期的跨平台开发解决方案。
5. CLI和文档
6. 组件和解决方案 包含 • 100+业务组件和公共组件支持 • iOS/Android跨平台统一组件 • CRN Web代码转换 • 业务开发技术支持
7. CRN 性能优化  Bundle拆分和框架预加载  业务代码按需加载  业务代码预加载  渐进式渲染页面
8. RN打包文件分析 Global 定义 框架模块 模块定义 业务模块 入口模块调用 标准打包bundle文件结构
9. RN性能优化核心概念 概念 • define 仅仅是模块的定义,不耗时间 • require 代码执行,耗时点! • import 编译之后成为require
10. CRN框架代码拆分 • RN自带框架模块550+ • 框架入口模块可设计成空白页面 Global 定义 框架模块 • 进入业务时,框架空白页面加载业务代码 • JS执行环境(Instance)和UI分离 模块定义 业务模块 业务模块 入口模块调用 框架 业务
11. CRN框架预加载和缓存策略 Loading (框架加载中) Ready (框架加载完成) Dirty (被业务使用过) Error (执行出错) • 后台预创建好框架代码(Ready)的实例 • 缓存加载过的业务模块(Dirty)实例,加速再次加载 • 线上数据:进入业务时,Ready 80%, Dirty 15%
12. CRN框架预加载效果 RN业务加载的耗时分布 CRN预加后载业务加载的耗时 CRN性能数据基于0.30版本,在iPhone 6,Sony Xperia于2016年验证
13. 业务复杂度增加导致的首屏加载慢 CRN 业务页面路由配置示例 lazyRequire方案实现按需加载 随着业务复杂度增加,页面增加导, 首屏加载变慢
14. CRN按需加载方案 • 开发阶段 • LazyRequire等价于require • 页面lazyRequire替换import • 打包阶段 • Babel插件转换路径为模块ID • 运行阶段 • Page切换时,自动load()执行
15. Lazy Require性能数据 数据 • 业务首屏加载性能提升明显 • 支持了复杂业务采用CRN开发 数据基于RN0.41,iPhone Simulator多次测试 (2017年9月)
16. Require耗时分析工具 辅助发现加载存在性能瓶颈的模块
17. 其他按需加载方案 • Getter API导出模块 • inlineRequire
18. 业务代码预加载 策略 • 尽可能多的预先执行业务代码 • 预加载模式下,lazy Require强制加载 • 缓存按照业务名而非URL区分,提高缓存利用率 • 内存占用问题(每个业务Android上2MB左右内存增加)
19. 渐进式渲染方案 策略 • 适用于复杂页面场景 • 先渲染骨架图/头部部分 • 列表页面先渲染可视部分,滑动时按需渲染
20. 发布与运维  发布系统  性能报表系统  异常上报系统
21. 发布平台 功能 • 按版本/平台发布 • 灰度、回滚支持 • 发布结果查看 • 实时达到率 数据 • 平均每包大小15KB • 实时到达率: 首屏入口85%, 二级及以上页面入口97%
22. 性能报表系统 功能 • 线上框架首屏渲染时间 • 多维度过滤筛选 • 耗时分布
23. 异常上报系统 功能 • 实时上报Native/JS异常 • 多维度过滤筛选 • 支持报警配置 • 发布必备辅助系统
24. Android上的稳定性优化  常规Crash处理  JSC错误  内存问题  线程安全
25. Android上的稳定性优化 - 常规异常处理 • 跟进crash堆栈逐一处理 • so加载失败重试补偿
26. Android上的稳定性优化 - JSC错误 • 堆栈只有libjsc.so • 尝试编译新版本jsc • 编译多架构 jsc • debug jsc
27. Android上的稳定性优化 - 内存问题 • Instance和ReactView解绑时销毁所有子view • ReactContext在ViewManager中使用弱引用 • 缓存的Instance使用次数限制
28. Android上的稳定性优化 - 线程安全 • JS-Native 交互过程中的线程安全 • 死锁问题 • 多Instance并行创建下偶现的HashMap问题
29. Android 适配  全面屏适配  折叠屏适配  其他适配
30. Android适配 - 全面屏的适配 • 避免使用window.height来限定 页面高度 • React Native Dialog 加载逻辑 中的异步渲染 • flex:1动态布局
31. Android适配 - 折叠屏适配 • 避免直接使用Dimension • width,height state化 • flex:1动态布局 • 屏幕宽高改变Event
32. Android适配 - 其他适配 • 多ROM下的字体稳定性 • 权限问题:权限和业务API绑定 • 状态栏
33. CRN 开源 https://github.com/ctripcorp/CRN
34. CRN 在携程Android上的应用与实践 Q&A
35. THANKS 安卓绿色联盟 携程技术中心
36. 添加安卓绿色联盟官方助手微信 备注信息,加入现场技术交流群