这是我参与「第五届字节青训营」伴学笔记创作活动的第8天。

跨端技术

跨端

1. 跨端的背景

随着业务与技术的发展，产生了越来越多的业务场景和端，如：PC端，移动端，web端等等。各端功能几乎一致，但需单独配置开发人员，开发和维护成本高。

2. 跨端技术方案目标

1. 研发效率高

1. 学习成本低
2. 多端一致性高

2. 用户体验好

1. 稳定性高
2. 性能体验好

3. 动态化

1. 支持动态下发，满足日益增长的业务需求

跨端技术方案

1. Hybrid方案

基于WebView渲染，通过JS Bridge把一部分系统能力开放给JS调用
优点：开发成本低、CSS全集、一致性好
缺点：性能中等

2. 原生渲染方案

使用JS开发，通过中间层桥接后使用原生组件来渲染UI界面
优点：性能好
缺点：CSS子集、一致性一般

3. 自渲染方案

利用Skia重新实现渲染管线，不依赖原生组件
优点：性能好、一致性好
缺点：CSS子集、Dart生态一般、开发成本较高

4. 小程序方案

使用小程序DSL+JS开发，通过中间层桥接后调用原生能力，使用webview来渲染UI界面
优点：开发成本低、CSS全集、一致性好

小程序跨端

开发流程

1. 下载小程序开发工具

2. 小程序开发、调试

3. 小程序上传

小程序优化

1. 留住用户

2. 提升转化率

3. 提升用户体验

小程序性能

小程序性能是指小程序在APP中加载和呈现的速度，以及对用户交互的响应程度。性能问题多种多样，可能会在交互时有延迟，更严重会导致小程序无法响应，导致用户流失，因此性能优化是关键且必须的。

优化手段

1. 启动性能优化

1. 减少包体积

1. 合理使用分离
2. 移除无用文件
3. 控制包内静态资源

2. 减少同步逻辑

1. 优先使用异步API
2. 避免启动时运行过多同步代码

3. 合理缓存数据

1. 网络数据缓存
2. API数据缓存

4. 图片优化

1. 选择合适的图片格式
2. 进行合理的压缩
3. 使用CDN并开启缓存

2. 运行时性能优化

1. 合理使用setData

1. 减少发送频率
2. 动画不使用setData

2. 合理使用自定义组件

1. 合理拆分组件数量
2. 只注册当前使用组件
3. 同步修改初始data

3. 内存优化

1. 及时解绑数据监听
2. 及时清理定时器

4. 导航栏适应

1. 适当开启自定义导航栏
2. 关键信息避开导航栏和胶囊按钮

个人总结

今天主要了解了有关于主流跨端技术方案的一些实现原理及优缺点