# 技术栈分层
# Native
# 优点
操作体验流畅、性能好、数据存储较安全
# 缺点
发版周期长、频繁下周更新、线上故障修复及时度低
# 适用场景
- 原生动画、原生API(相机、蓝牙)
- 多媒体、音视频
- 数据加密、存储(JNI)
# ReactNative
# 优点
有热更新能力、跨平台、支持前端编码
# 缺点
操作体验一般,流畅度一般
# 适用场景
- 主流程、核心支付、下单模块
# H5
# H5特点
体验流畅度较弱、灵活、高效、发布便捷
# 适用场景
运营活动
内置商城
# 整体优化
# RN/Native 优化
# RN/Native耗时
耗时链路:Click->startActivity-> WebView初始化->loadUrl
耗时占比:15%
# 优化措施
- 预加载(WebView预初始化)
- CodeCache(缓存)
- bundle体积优化
- Tree Shaking
- 按需加载打包
- 懒加载
- RAMbundle
# 网络优化
# 网络耗时链路
耗时链路:DNS->TCP->Request->Response
耗时占比:50%
# 网络优化措施
请求前置
并行请求
网络缓存(强缓存/协商缓存)
借用原生请求(okHttp)
浏览器标签
- dns-prefetch
- prefetch
- preconnect(受限)
- prerender(受限)
# 渲染优化
# 渲染耗时链路
耗时链路:解析->布局->渲染->首屏绘制
耗时占比:35%
# 渲染优化措施
分布渲染(只渲染视口内)
NSR/SSR同构/骨架屏
# 综合优化
# 内存优化
- 容器费用
- 预创建
- 资源预取
- 空间换时间(内存大)
- 时间换空间(内存小)
# 缓存体系
MemoryCache
DiskCache
CSS、Html、JS
- ContentCache
单View多Page
- Multi-WebView
# 获取首屏时间
- 开启MutationObserve
- 检测首屏外节点变动
- 次数超过阀值
- 关闭Mutation
- 计算首屏时间