这是我参与「第五届青训营 」伴学笔记创作活动的第 10 天。随着业务需求的变更，产生了越来越多的业务场景，发展了越来越多的端。PC端、移动端（Android，iOS）、Web端、IoT设备等。
跨端技术常见痛点：在各端功能几乎一致的情况下，各端需单独配置研发人员，导致人工和维护成本较高。
跨端技术方案目标
- 研发效率高：低学习成本、多端一致性高。
- 用户体验好：性能稳定。
- 动态化：支持动态化下发，满足日益增长的需求。
跨端技术方案
- Hybrid方案——基于webview渲染，通过JS Bridge把部分系统功能开放（如，文件、相册等）。
优势：对前端开发者较友好，可以很快实现跨端，同时保留原生的能力。
- 原生渲染方式——使用JS开发，通过中间层桥接后使用原生组件来渲染UI界面
渲染方案：React Native（注：React Native主要由JSI、Fabric、TurboModules组成）
优势：最大化的复用前端的生态和Native生态，
- 自渲染方式——利用Skia重新实现渲染管线，不依赖原生组件
渲染方案：Flutter
- 小程序方案——使用小程序DSL+JS开发，通过中间层桥接后调用原生能力，使用webview来渲染UI界面。
小程序的运行环境：分为渲染层和逻辑层，其中ttml模班与tts样式工作在渲染层，js脚本运行在逻辑层。 小程序的渲染层和逻辑层分别由两个线程管理：渲染层使用webview；逻辑层采用JSC线程。
- 跨端技术方案对比
基于小程序跨端
1. 为什么要性能优化？
-
小程序性能优化的目的就是提升用户体验、留住用户。实际应用场景中会遇到各种各样的问题影响用户体验（如：小程序响应缓慢、无法加载等），甚至流失用户。
-
如何衡量性能？：可以通过加载和呈现的速度、用户交互响应速度等方面进行衡量。
2. 优化手段
启动时性能体验
- 减小包的体积——合理使用分包、移除无用文件、控制包内静态资源
- 减少异步逻辑——优先使用异步API、避免过度使用Sync结尾的同步API、避免启动时运行过多同步代码
- 更早的展示首屏数据——尽早调用关键API和请求、接入数据预取
- 合理缓存数据——网络数据缓存、某些数据可存储在本地、API数据缓存
- 图片优化——选择合适的格式、合理压缩
- 更多优化手段——框架骨架屏、占位组件
运行时性能体验
- 合理使用setData——减少发送频率
- 合理使用自定义组件
- 合理监听处理事件——去掉不必要的事件绑定、合理监听处理scroll事件
- 内存优化——及时解绑事件监听
- 导航栏适配——避免全局开启动态导航栏
- X分屏适配——通过onResize监听显示区域变化
总结
通过这次的笔记加深了对前端跨端技术的了解和对这几种主流的跨端技术的方案的认识、熟悉了小程序跨端的操作。越来越多的端的出现，导致后期的需求扩展开发和维护的成本也变高。
