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

一、跨端是什么

1. 跨端背景

随着业务的发展，产生了越来越多的业务场景，同时随着技术的发展，产生了越来越多的端，PC端(Windows、Mac)、移动端（安卓、iOS)，web端、loT设备（车载设备、手表)等

多端的痛点

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

2. 跨端技术方案目标

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

二、跨端技术方案介绍

1. hybird方案

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

image (96).png

image (97).png

2. 原生渲染方案

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

原生渲染方案 - React Native

React Native是一个由Facebook于2015年9月发布的一款开源的JavaScript框架，它可以让开发者使用JavaScript和 React来开发跨平台的移动应用。

image (98).png

React Native 的思路是最大化地复用前端的生态和 Native 的生态，和 WebView 容器的最大区别在于 View 的渲染体系。

React Native 主要由JSI、Fabric、TurboModules 组成。

image (99).png

3. 自渲染方案

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

自渲染方案 - Flutter

Flutter是Google在2018年世界移动大会公布的开源应用开发框架，仅通过一套代码库，就能构建精美的、原生平台编译的多平台应用。

image (1).jpeg

image - 2023-02-04T223258.207.png

Flutter与上述Recat Native、WebView容器本质上都是不同的，它没有使用WebView、JavaScript解释器或者系统平台自带的原生控件，而是有一套自己专属的Widget，底层渲染使用自身的高性能C/C++ 引擎自绘。

image - 2023-02-04T223348.315.png

4. 小程序方案

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

字节小程序

字节小程序是一种全新的连接用户与服务的方式，它可以在宿主(抖音、头条等App)内被便捷地获取和传播，同时具有出色的使用体验。

image - 2023-02-04T223525.638.png

image - 2023-02-04T223535.558.png

小程序的运行环境分成渲染层和逻辑层，其中 ttml 模板和 ttss 样式工作在渲染层，js 脚本工作在逻辑层。
小程序的渲染层和逻辑层分别由 2 个线程管理：渲染层的界面使用了WebView 进行渲染；逻辑层采用 JSC 线程运行 JS 脚本。

小程序的通信模型图

image - 2023-02-04T223616.416.png

5. 四种方案对比

技术方案	视图层	逻辑层	优点	缺点
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.性能较好

三、基于小程序跨端实践

1. 快速开发一个小程序

下载小程序开发者工具

image - 2023-02-04T225336.083.png

小程序开发、调试

image - 2023-02-04T225346.104.png

小程序上传

image - 2023-02-04T225521.679.png

2. 小程序性能优化

优化的意义

留住用户
提升转换率
提升用户体验

小程序性能指标

小程序性能是指小程序在 APP 中加载和呈现的速度，以及对用户交互的响应程度。

启动环节耗时并不能完全真实反映用户体验，我们也借助实际用户行为，异常监控，作为辅助指标
包含：取消率、白屏率、LCP 到达率
- 取消率是指用户在加载过程中点击返回或右上角关闭的占比，用于描述小程序的启动性能，用户取消率越低，启动性能越好。
- 白屏率是指从启动到退出白屏的 pv占比，出现白屏表示页面渲染失败，我们目标是尽可能降低白屏率
- LCP 到达率，如果较多用户在 LCP 到达前离开，也表示小程序可能出现异常，或用户体验较差

借助启动阶段指标及辅助指标，我们可以较为准确的描绘出小程序的体验感知

平板指标看板

image - 2023-02-04T231000.304.png

image (6).jpeg

优化手段

image - 2023-02-04T231107.119.png

二、启动性能体验
2.1 较少包体积
    - 合理使用分包
    - 移除无用文件
    - 控制包内静态资源
2.2 减少同步逻辑
    - 优先使用异步API
    - 避免启动时运行过多同步代码
2.3 更早的展示首屏数据
    - 尽早调用关键API和请求
    - 接入数据预取
    - 避免非必要的reLaunch
2.4 合理缓存数据
    - 网络数据缓存
    - API数据缓存
2.5 图片优化
    - 选择合适的图片格式
    - 进行合理的压缩
    - 使用CDN并开启缓存
2.6 更多优化手段
    - 框架骨架屏
    - 占位组件

三、运行时性能体验
3.1 合理使用setData
    - 减少发送频率
    - 动画不使用setData
3.2 合理使用自定义组件
    - 合理的拆分组件数量
    - 只注册当前使用的组件
3.3 合理监听处理事件
    - 合理监听处理 scroll 事件
    - 去掉不必要的事件绑定
3.4 内存优化
    - 及时解绑事件监听
    - 及时清理定时器
3.5 导航栏适配
    - 适当开启自定义导航栏
    - 关键信息避开状态栏和胶囊按钮
3.6 X分屏适配
    - 通过onResize监听显示区域变化
    - 不使用JS设置ScrollView高度

性能评分工具

image - 2023-02-04T231420.183.png

image - 2023-02-04T231508.944.png

四、总结与展望

1. 课程总结

主流跨端技术方案
小程序开发与实践

2. 技术展望

随着端越来越多，跨端的需求会越来越强烈，跨端技术方案也会不断迭代，核心目标仍然是「write once, run anywhere」，未来自渲染可能会出现更多机会。

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