# 技术栈分层
# 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
- 计算首屏时间