这是我参与「第五届青训营」伴学笔记创作活动的第 11 天
常见痛点
- 各端功能几乎一致,各端需要单独配置研发人员
- 开发、维护成本高
- 安卓、 iOS 多样化
跨端技术方案目标
- 研发效率高:低学习成本、多端一致性高。
- 用户体验好:性能稳定。
- 动态化:支持动态化下发，满足日益增长的需求。
方案
Hybrid方案
原生渲染方式-react native
主要特征：
- 原生IOS组件
- 异步执行
- 触摸处理
自渲染方案
利用Skia重新实现渲染管线，不依赖原生组件
小程序方案
使用小程序 DSL + JS开发，通过中间层桥接后调用原生能力，使用webview来渲染UI界面。
字节小程序
跨端方案对比
小程序性能优化手段
- 优化资源文件并清理无用的内容，合理使用分包、移除无用文件
- 减少同步逻辑，优先使用异步API、避免过度使用Sync结尾的同步API、避免启动时运行过多同步代
- 码
- 更早的展示首屏数据，尽早调用关键APl和请求、接入数据预取
- 合理缓存数据，网络数据缓存、某些数据可存储在本地、API数据缓存，大文件放到CDN中
- 图片优化，选择合适的格式、合理压缩，对于不用透明的图片使用JPEG或png来代替，并适当的使用压缩
- 更多优化手段，框架骨架屏、占位组件
- 按需渲染
- 合理使用setData，减少发送频率
- 合理使用自定义组件
- 合理监听处理事件，去掉不必要的事件绑定、合理监听处理scroll事件
- 内存优化，及时解绑事件监听
- 导航栏适配，避免全局开启动态导航栏
- X分屏适配，通过onResize监听显示区域变化
