这是我参与「第五届青训营 」伴学笔记创作活动的第 10 天
跨端是什么
跨端背景
随着业务的发展，产生了越来越多的业务场景，同时随着技术的发展，产生了越来越多的端，PC端、移动端、web 端、IoT设备等
常见痛点
- 各端功能几乎一致，各端需要单独配置研发人员
- 开发、维护成本高
- 安卓、IOS 发版周期长
跨端技术方案目标
- 研发效率高
- 学习成本低
- 多端一致性高
- 用户体验好
- 稳定性高
- 性能体验好
- 动态化
- 支持动态化下发，满足日益增长的业务需求
跨端技术方案
Hybirid 方案
基于 WebView 渲染，通过 JS Bridge 把一部分系统能力开放给 JS 调用。
原生渲染方案
使用 JS 开发，通过中间层桥接后使用原生组件来渲染 UI 界面。
原生渲染方案 - React Native
React Native 是一个由 Facebook 于 2015 年 9 月 发布的一款开源的 JavaScript 框架，它可以让开发者使用 JavaScript 和 React 来开发跨平台的移动应用。
自渲染方案
利用 Skia 重新实现渲染管线，不依赖原生组件
自渲染方案 - Flutter
Flutter 是 Google 在 2018 年世界移动大会公布的开源应用开发框架，仅通过一套代码库，就能构建精美的、原生平台编译的多平台应用。
小程序方案
使用小程序 DSL + JS 开发，通过中间层桥接后调用原生能力，使用 webview 来渲染 UI 界面。
小程序方案 - 字节小程序
字节小程序是一种全新的连接用户于服务的方式，它可以在宿主（抖音、头条等App）内被便携地获取和传播，同时具有出色的使用体验。
跨端技术方案对比
| 技术方案 | 视图层 | 逻辑层 | 优点 | 缺点 |
|---|---|---|---|---|
| hybrid方案 | webview | webiew JS thread | 1.开发成本低 2.CSS 全集 3.一致性好 | 1.性能中等 |
| 原生渲染方案 | 原生组件 | JS Engine | 1.性能好 | 1.CSS 子集 2.一致性一般 |
| 自渲染方案 | Skia | Dart VM | 1.性能最好 2.一致性好 | 1.CSS 子集 2.Dart 生态一般 3.开发成本较高 |
| 小程序方案 | webview + 原生组件 | JS Engine | 1.开发成本低 2.CSS 全集 3.一致性好 | 1.性能较好 |
基于小程序跨端实践
快速开发一个小程序
- 下载小程序开发者工具
- 小程序开发、调试
- 小程序上传
小程序性能优化
小程序性能优化 - 优化意义
- 留住用户
- 提升转化率
- 提升用户体验
小程序性能优化 - 小程序性能指标
Loading → FP → LCP
LCP是用户真正使用的状态，尽可能提前
小程序性能优化 - 优化手段
启动时性能体验
- 减少包体验
- 减少同步逻辑
- 更早的展示首屏数据
- 合理缓存数据
- 图片优化
运行时性能体验
- 合理使用setData
- 合理使用自定义组件
- 合理监听处理时间
- 内存优化
- 导航栏适配
- X分屏适配
鲸饮未吞海，剑气已横秋。
