这是我参与「第五届青训营 」伴学笔记创作活动的第11天！
『 跨端背景 』
随着业务的发展，产生了越来越多的业务场景，同时随着技术的发展，产生了越来越多的端，PC端(Windows、Mac)、移动端(安卓、iOS )、web端、IoT设备（车载设备、手表)等
常见痛点︰
- 各端功能几乎一致，各端需要单独配置研发人员。
- 开发、维护成本高。
- 安卓、iOS 发版周期长。
一、跨端技术方案目标
- 研发效率高
- 学习成本低
- 多端一致性高
- 用户体验好
- 稳定性高
- 性能体验好
- 动态化
- 支持动态化下发，满足日益增长的业务需求
二、跨端技术方案介绍
- hybrid 方案
- 基于 WebView 渲染，通过 JS Bridge 把一部分系统能力开放给 JS 调用。
- 原生渲染方案
- 使用 JS 开发，通过中间层桥接后使用原生组件来渲染 UI 界面。 ⭐拓展：React Native 是一个由 Facebook 于 2015 年 9 月发布的一款开源的 JavaScript 框架，它可以让开发者使用 JavaScript 和 React 来开发跨平台的移动应用。
- 自渲染方案
- 利用 Skia 重新实现渲染管线，不依赖原生组件。 ⭐拓展：Flutter 是 Google 在 2018 年世界移动大会公布的开源应用开发框架,仅通过一套代码库，就能构建精美的、原生平台编译的多平台应用。
- 小程序方案
- 使用小程序 DSL +JS 开发，通过中间层桥接后调用原生能力，使用 webview 来渲染 UI 界面。
跨端技术方案对比
| 技术方案 | 视图层 | 逻辑层 | 优点 | 缺点 |
|---|---|---|---|---|
| hybrid 方案 | webiew | webiew JS thread | 开发成本低；CSS 全集；一致性好 | 性能中等 |
| 原生渲染方案 | 原生组件 | JE Engine | 性能好 | CSS 子集；一致性一般 |
| 自渲染方案 | Skia | Dart VM | 性能最好；一致性好 | CSS 子集；Dart 生态一般；开发成本较高 |
| 小程序方案 | webview + 原生组件 | JS Engine | 开发成本低；CSS 全集；一致性好 | 性能较好 |
基于小程序跨端实践
快速开发一个小程序的前提是需要配置小程序编写与开发。首先，下载微信开发者工具；其次，进行小程序开发和调试；最后，上传小程序。下图是进入微信开发者工具内部编译界面：
小程序性能优化
- 优化意义
- 留住用户
- 提升转化率
- 提升用户体验
- 性能指标
- 性能评分工具
- 性能分析工具
结尾
未来的主流多半会在跨端技术方案，以及小程序开发与实践。伴随跨端越来越多，跨端的需求会越来越强烈，跨端技术方案也会不断迭代。但最核心的目标仍然是「write once, run anywhere」，未来自渲染可能会出现更多机会。
综上，今天又是学习的一天！😊
