全民K歌React Native实践与优化

PPT主题:全民K歌React Native实践与优化
嘉宾:袁聪

1)React Native,H5,Native的优缺点

2)React Native优化——Bundle拆分
  • 业务分离，按需加载，减少资源消耗
  • 避免执行大量JavaScript代码带来的性能问题
  • 更灵活的优化策略(启动预加载)
  • 减少更新时的流量消耗
  • 启动的性能瓶颈在于JavaScript的执行
  • 模块拆分成巨量的单独的小文件，需要时NativeRequire加载
  • 可优化点：小文件合并
  • 在文件头写入索引，module通过null byte分隔，需要时根据索引加载

  优势:
    • 按业务拆分
  • 无较多小文件导致的I/O性能问题
  • 分包粒度灵活，大到整个业务
3)React Native优化——动态加载
  • 热更新

4)React Native优化——首屏秒开
  • ReactInstanceManager单例化
• ReactContext预加载
• 拆分Bundle，减少JS执行时间
• 减少JS Module注册
• 删除JS中_DEV_代码
  • 优先加载本地缓存
• 常用图标图片本地打包
  • 减少不必要的动画
• 合并Native调用，降低调用频率
• 使用客户端执行性能高的代码
  • 布局层级优化:
    • JS层减少嵌套以及不使用会造成多层布局的属性
  • 源码修改减少层级
  • Native通过自定义View的形式实现复杂布局提供给JS调用
5)React Native优化——网络优化
  问题:
  • DNS解析慢 DNS劫持 连接速度慢 弱网络兼容差
  解决
  • IP直连 竞速和就近接入 长连接 更小的请求包 重试机制
6)React Native优化——其他优化
  • 排查内存泄露
  • 文件合法性校验-安全性
7)React Native优化——后续优化方向
  • 差分算法增量更新
  • Hot Reload

**以上内容均来源于SDCC2016大会PPT**