这是我参与「第五届青训营 」伴学笔记创作活动的第 8 天
背景
随着技术业务发展，产生了很多端，如：PC（win、mac）、移动（安卓、ios）、web端、Iot设备...
痛点
- 各端功能几乎一致
- 代码维护成本高，需要同时进行修改
- 发版本麻烦
意义
一套代码，多端一致，降低开发成本
特点
- 研发效率高
- 学习成本低
- 多端一致性
- 用户体验好
- 稳定性高
- 性能好
- 动态化
- 支持动态化下发
跨端技术方案
hybrid方案
基于WebView渲染，通过JS Bridge把系统能力开发给JS调用
优点：
- 开发成本低
- CSS全集
- 一致性好
缺点：
-
性能中等
-
浏览器端，H5
原生渲染方案
使用JS开发，通过中间层桥接后使用原生组件来渲染UI界面
优点：
- 性能好
缺点：
-
CSS子集
-
一致性一般
-
React Native（RN）
-
性能较高，样式可能存在缺失无法实现
自渲染方案
更加底层，利用开源引擎Skia实现渲染管线，不依赖原生组件，逻辑层：Dart VM
优点：
- 性能最好
- 一致性好
缺点：
-
CSS子集
-
Dart生态一般
-
开发成本高
-
Flutter
小程序方案
使用小程序DSL + js开发，通过中间层桥接后调用原生能力，使用WebView渲染UI界面
多WebView作为渲染层，逻辑层使用JSC类似V8
优点：
- 开发成本低
- CSS全集
- 一致性好
缺点：
- 性能较好
缓存优先方案
小程序开发实践
开发流程
- 下载开发者工具
- 开发、调试
- 上传、发包
性能优化
- 留住用户
- 提升转化率
- 提升用户体验
- 启动性能优化
- 运行时性能优化
- 性能分析评估
总结
本次课程主要学习了跨端技术的相关方案，对每个方案进行了优缺点的评估，并对小程序开发实践做了部分介绍。我在之前主要接触了hybrid方案和小程序方案的实践，对于原生渲染（RN）、自渲染方案（Flutter）并没有太多的认识。通过对于这四类跨端技术的分析和对比，能够很明确的分辨出各方案的优劣势，针对产品、需求做定制化选型
