这是我参与「第五届青训营 」伴学笔记创作活动的第 8 天
跨端技术概述
每个端配备人员
痛点：
- 1.各端功能几乎一致，都需要单独配置研发人员
- 2.开发、维护成本高-bug一致，运行情况一致。
- 3.安卓。ios发版周期长
产生跨端需求
- 1.研发效率高-学习成本低、多端一致性高
- 2.用户体验好-稳定性高、性能体验好。-到达率、白屏时间、加载时间、动画流畅度
- 3.动态化-支持动态化下发，满足日益增长的业务需求
跨端技术方案介绍
基于场景选择最适合的方案
Hybrid方案
- 基于webView渲染，通过js Birdge把一部分系统能力开放给js调用-文件能力、蓝牙能力...
- 优点：开发成本低、一致性好，CSS全集。
- 缺点：性能中等，
原生渲染方案-使用js开发，通过中间层桥接后使用原生组件来渲染ui组件
- 优点：性能好
- 缺点：CSS子集、一致性一般
原生-React Native
渲染底层原理不一样，OEM widgets，原生渲染效率比webView效率更高。但是原生受限比较高。对接ios 安卓的api
- 优点：性能最好，一致性好。-非常好的定制
- 缺点：CSS子集，Dart生态一般，开发成本较高。
自渲染方案-更底层
利用Skia重新实现渲染管线，不依赖原生组件。
- Flutter，通过一套代码库。分成三层，Framework-前端开发者、主要Engine、Embedder
小程序方案
- 使用小程序DSL+JS开发，通过中间层桥接后调用原生能力，使用webview来渲染UI界面
- 优点：开发成本低，CSS全集，一致性好
- 缺点：性能较好。
- 产品方案。
基于小程序跨端实现
- 1.下载小程序开发者工具2.小程序开发、调试3.小程序上传
小程序性能优化-优化意义
- 1.留住顾客 2.提升转化率 3.提升用户体验
性能指标
- 加载-FP首页-LCP最大内容绘制，尽可能提前
- 平台指标看板
- 启动性能体验与运行时性能体验
- 性能评分工具-小程序开发工具中的一项功能
- 性能分析工具-如何优化？
总结
有些术语有点陌生，不太听得懂。
