我参与「第五届青训营」伴学笔记创作活动的第9天。今天开始了有关跨端技术方面的学习。

跨端是什么

背景

随着业务发展与技术发展，产生了越来越多的业务场景与应用场景如：PC（window、mac），移动端（安卓、IOS），web，IOT设备（车载设备、手表）。而后又产生了许如开发维护成本高、各端功能几乎一致等多问题

目标

1. 研发效率高（学习成本低、多端一致）
2. 用户体验好（稳定性好，性能体验好）
3. 动态化（支持动态下发，满足日益增长的业务需求）

跨端技术方案

hybrid方案

基于 WebView 渲染界面，通过 JS Bridge 把一部分功能系统开放给 JS 调用

优点：开发成本低、CSS全集、一致性好

原生渲染方案

通过JS 开发，通过中间层桥接之后使用原生组件来渲染UI界面，例如React Native

优点：性能好

自渲染方案

利用 skia 重新实现渲染管线，不依赖原生组件，逻辑层使用Dart VM，对平台依赖低，例如Flutter

优点：一致性好、性能好

小程序方案

使用小程序 DSL + JS 来开发，通过中间层桥接后调用原生能力，使用 webview 来渲染UI，逻辑层使用JSC，例如字节小程序

优点：开发成本低、CSS全集、一致性好

基于小程序跨段实践

性能优化

意义

• 留住用户
• 提高转化率
• 提升用户体验

性能指标

从平台看板对各个指标进行分析并优化性能

优化手段

• 启动时性能体验
  • 减小包体积
  • 减小同步逻辑
  • 合理缓存数据
  • 图片优化
  • 更早的展示首屏数据
• 运行时性能体验
  • 合理使用setData
  • 合理使用自定义组件
  • 合理监听处理事件
  • 内存优化
  • 导航栏适配
  • X分屏适配

性能评分工具

性能分析工具

个人小结

本堂课有关跨端技术的理论知识较多，详细介绍了相关方案的内容及其优缺点，后半部分介绍了如何开发小程序及其性能优化。未来跨端技术势必会更加种类繁多，产生更好的效果。