这是我参与「第五届青训营」伴学笔记创作活动的第 13 天
跨端是什么
跨端背景
业务场景越来越多，端也越来越多。传统场景下每个端单独配置开发人员，开发维护成本高，Android和IOS发版周期长。
跨端技术方案目标
-
研发效率高
- 学习成本低
- 多端一致性高
-
用户体验好
- 稳定性好
- 性能体验好
-
动态化
- 支持动态化下发，满足业务需求
跨端技术方案介绍
Hybrid方案
- 基于Webview渲染通过JS Bridge把一部分系统能力开放给JS调用
- 多端都支持webview，该操作等价于打开一个网页
- 蓝牙等系统能力通过JS Bridge调用
- 开发者层面：JS代码和bridge
- 平台层面：webview，画布与事件
- 服务层面：位置、蓝牙、音频、相机、传感器……
原生渲染方案
- 使用JS开发，通过中间层桥接后使用原生组件渲染UI页面
React Native
- Facebook发布
- 开发者可使用JS和React开发跨平台应用
- 开发者层面：与Hybrid相同
- 平台层面：OEM widgets，画布与事件
- 服务层面：与Hybrid相同
- 原生组件渲染效率更高
- React层面（上半） ：转化代码，优化代码，生成组件
- Native层面（下半） ：系统层面调用
自渲染方案
- 更底层的实现，利用Skia重新实现渲染管线，不依赖原生组件
- Skia是一个开源的渲染引擎，高度自由
Flutter
- Google发布
- 开源应用开发框架
- 开发者层面：没有bridge，一般也不用JS，直接接触渲染方向的widgets和系统方向的channels
- 平台层面：画布与事件
- 服务层面：与Hybrid相同
- 上层：开发者使用，基于widgets开发功能
- 中层：内核部分，C++实现
- 下层：对接系统底层
小程序方案
- 小程序DSL+JS开发，通过中间层桥接后调用原生能力，webview渲染UI页面
字节小程序
-
渲染层：webview容器
-
逻辑层：JSC，JS内核（运行环境），开发者代码
-
平台层：对接渲染和逻辑层，网络通信
-
运行过程
- 用户点击
- 如有缓存，优先使用缓存打开
- 分成逻辑和渲染两个线程
- 分别加载基础库
- 逻辑线程创建App，渲染线程初始化环境
- 逻辑线程创建page，渲染线程收取数据渲染页面
- 逻辑线程受到渲染完成，运行回调
基于小程序的跨端实践
开发流程
- 下载开发者工具
- 小程序开发调试
- 上传小程序
性能优化
优化意义
- 留住用户
- 提升转化率
- 提升用户体验
性能指标
- 一开始是加载状态loading
- 然后是部分内容状态FP
- 最后是全部内容状态LCP
- 我们希望LCP尽可能早地出现
优化手段
启动性能
- 减少包体积，加快下载：合理分包，移除无用包，控制包内静态资源
- 减少同步逻辑，减少阻塞：优先使用异步API，避免启动时运行过多同步代码
- 更早展示首屏数据：尽早调用关键API请求，接入数据预取，避免非必要重启
- 合理缓存：网络数据/API数据缓存
- 图片优化：图片格式，合理压缩，使用CDN&缓存
- 其它：框架骨架屏，占位组件
运行性能
- setData：减少频率，只发送有用的数据，动画不使用setData（容易丢帧）
- 合理自定义组件：合理拆分组件，只注册当前使用的，同步修改初始data
- 合理监听处理事件：scroll事件（触发很频繁，需要节流），去掉不必要的绑定
- 内存优化：及时解除绑定，及时清理定时器
- 导航栏适配：适当开启自定义导航栏，避免导航和状态栏及按钮冲突
- X分屏适配：高度大小变化，使用onResize而不是scroll监听区域大小
