这是我参与「第五届青训营 」伴学笔记创作活动的第 12 天
跨端是什么
在业务的发展过程中,会不断地产生出更多的业务场景,比如PC端,移动端、Web端、LoT设备的等。而每种业务场景又分别对应着不同的开发技术和方案。但是对于同一业务需求,各端的功能基本都是一样的,但却因为技术的具体实现不同,需要配置单独的研发人员,造成开发、维护成本高的问题。为了解决这些问题,跨端技术应运而生。
跨端技术的目标
- 提高研发效率
- 学习成本低
- 多端一致性高
- 用户体验好
- 稳定性搞
- 性能体验好
- 动态化
- 支持动态化下发、满足日益增长的业务需求
跨端技术方案
1.Hybrid
基于WebView渲染,通过JS Bridge把一部分系统能力开放给JS调用
2.原生渲染方案 - React Native
使用JS开发,通过中间层桥接后使用原生组件来渲染UI界面
3.自渲染方案 - Flutter
利用Skia重新实现渲染管道,不依赖原生组件
4.小程序方案
使用小程序DSL + JS开发,通过中间层桥接后调用原生能力,使用webview来渲染UI界面
性能优化
- 性能优化目的
- 留住用户
- 提升转化率
- 提升用户体验
- 小程序的性能指标
- Loading View
- 首次绘制
- 最大内容绘制
- 加载完成
- 优化手段
(1)较少包体积
- 合理使用分包
- 使用分包加载是优化小程序启动耗时效果最明显的手段。
- 移除无用文件
- 控制包内静态资源
(2)减少同步逻辑
- 优先使用异步API
- 在小程序初始化代码和启动相关的几个生命周期中,应避免执行复杂的计算逻辑
(3)更早的展示首屏数据
- 尽早调用关键API和请求
- 首屏绘制可能会依赖API数据和网络请求,尽早的调用相关网络请求,能提前数据准备时间
- 接入数据预读取
- 避免非必要的reLaunch
(4)合理缓存数据
- 网络数据缓存
- API数据缓存
(5)图片优化
- 选择合适的图片格式
- 进行合理的压缩
- 使用CDN并开启缓存
(6)其他优化手段
- 骨架框
- 占位组件
4. 运行时性能体验
- 合理使用setData
- 合理使用自定义组件
- 合理监听处理事件
- 内存优化
- 导航栏适配
- X分屏适配
总结
本节课主要对跨端技术和小程序开发相关知识进行了相应的介绍