这是我参与「第五届青训营 」伴学笔记创作活动的第 10 天
背景描述：
- 随着业务发展，有许多业务场景也随之产生。同时随着技术的发展，许多端也随之产生：PC端（Windows、Mac、Linux），移动端（安卓、ios）、web端、IoT设备 (车载设备、手表)等。
痛点
- 各端功能几乎一致、各端需要单独配置研发人员
- 开发、维护成本高
- 安卓、iOS发版周期长
方案目标
- 研发效率高
学习成本低，多端一致性高 - 用户体验好
稳定性高、性能体验好 - 动态化
支持动态化下发，满足日益增长的业务需求
跨段技术方案介绍
hybrid方案
- 基于WebView渲染，通过JS Bridge把一部分系统能力开放给JS调用。
- 移动端可以打开页面，进行展示。Eg：js没有的蓝牙、文件能力，系统把这些能力开放给WebView。
自渲染方案
- 利用Skia重新实现渲染管线，不依赖原生组件。
- Skia：开源的渲染引擎。
- Eg：Flutter，自定义Widgets。
原生渲染方案
- 使用JS开发，安卓、iOS提供组件，基于原生组件渲染，通过中间层桥接使用原生组件来渲染UI界面。
OEM widgets方案，原生组件渲染效率较WebView高，但能力较WebView有限，只能使用安卓、iOS系统提供的能力。 - Eg：React Native。
小程序方案
-
使用小程序DSL+JS开发，通过中间层桥接后调用原生能力，使用webview来渲染UI界面。
技术方案 视图层 逻辑层 优点 缺点 hybrid方案 webview webview JS thread 开发成本低，css全集，一致性好 性能中等 原生渲染方案 原生组件 JS Engine 性能好 css子集，一致性一般 自渲染方案 Skia Dart VM 性能最好，一致性好 css子集，Dart生态一般，开发成本较高 小程序方案 webview+原生组件 JS Engine 开发成本低，css全集，一致性好 性能较好
基于小程序跨端实践
快速开发一个小程序
- 下载小程序开发者工具
developer.open-douyin.com/docs/resour… - 小程序开发、调试
developer.open-douyin.com/docs/resour… - 小程序上传
小程序性能优化
-
留住用户，提升转化率，提升用户体验。
-
性能指标：Loading，FP首屏，LCP最大内容绘制（优化目标）。
