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

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

今日学习内容：跨端技术概述

一、跨端是什么

1. 跨端背景

随着业务的发展，产生了越来越多的业务场景，同时随着技术的发展，产生了越来越多的端，包括：PC端、移动端、web端、**IoT设备（车载设备、手表）**等

常见痛点：

1. 各端功能几乎一致，却需要单独配置开发人员
2. 开发、维护成本高
3. 安卓、ios发版周期长

跨端技术方案目标：

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

2. 跨端技术方案介绍

2.1 Hybrid方案

基于WebView渲染，通过JS Bridge把一部分系统能力开放给JS调用

2.2 原生渲染方案

使用JS开发，通过中间层桥接后使用原生组件来渲染UI页面

React Native：让开发者使用JavaScript和React来开发跨平台的移动应用

思路是最大化地复用前端的生态和Native的生态，和WebView容器的最大区别在于View的渲染体系。React Native抛弃了低效的浏览器内核渲染，转而使用自己的DSL生成中间格式，然后映射到对应的平台，渲染成平台的组件

相对WebView容器，体验会有一定的提升。不过，渲染时需要JavaScript和原生之间通信，在有些场景可能会导致卡顿。另外就是，渲染还是在Native层， 要求开发人员对Native有一定的熟悉度。

React Native是一主要有JSI、 Fabric、 TurboModules 组成。

2.3 自渲染方案

使用Skia重新渲染管线，不依赖原生组件

Flutter：仅通过一套代码库，就能构建精美的、原生平台编译的多平台应用

2.4 小程序方案

使用小程序DSL+JS开发，通过中间层桥接后调用原生能力，使用webview来渲染ui界面

字节小程序：

2.5 跨端方案对比

三、基于小程序跨端实践

小程序优化意义：

1. 留住用户
2. 提升转化率
3. 提升用户体验

性能指标：

• 小程序启动后会显示一个loading view在这个阶段会初始化小程序环境
• 初始化完成后开始加载小程序，然后开始第二个阶段首次绘制，这个时机开始渲染小程序的首帧
• 第三个阶段是「最大内容绘制」，在这时已经展示页面中的最大元素，也是比较接近用户视觉感知效果
• 最后是主要元素加载完成，并且达到了可交互的状态

通过以上启动阶段，可以将用户体验数字化表达