这是我参与「第五届青训营」伴学笔记创作活动的第 18 天

跨端背景

随着业务的发展，产生了越来越多的业务场景，同时随着技术的发展，产生了越来越多的端，PC端、移动端、web 端、IoT设备等

常见痛点

各端功能几乎一致，各端需要单独配置研发人员
开发、维护成本高
安卓、IOS 发版周期长

跨端技术方案目标

研发效率高
1. 学习成本低
2. 多端一致性高
用户体验好
1. 稳定性高
2. 性能体验好
动态化
1. 支持动态化下发，满足日益增长的业务需求

跨端技术方案

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分屏适配

[ 跨端技术概述 | 青训营笔记 ]