[这是我参与「第五届青训营 」伴学笔记创作活动的第 8 天]
1. 跨端技术方案目标
- 研发效率高
- 多端一致性较高
- 用户体验好
- 动态化
- 支持动态化下发
- 迭代更新周期短
2. 常见的跨端技术方案
- hybrid
- 基于 WebView 渲染，通过 JS Bridge 把一部分系统能力开发给 JS 调用（比如摄像头权限，以及内存权限等）
- 原生渲染
- 使用 JS 开发，通过中间层桥接后使用原生组件来渲染 UI 界面
- 借助 React Native 可以让开发者使用 JS 和 React 来开发跨平台的移动应用
- 但是使用 OEM widgets 会有一些样式会有缺失
- JSI --- JS 接口
- 由 C++ 构建的轻量级框架， 通过 JSI 可以直接操作 C++ 对象。 在 JS 中可以直接拿到 C++ 对象，省去了通信过程中反复序列化的过程
- FABRIC
- 和 UI 相关，将组件映射对 NATIVE 的组件
- TURBO MODULES
- 和系统权限能力相关， JS 通过 JSI 调用到 C++ 的相关 API， 然后经过
TURBO MODULES对接到 NATIVE，- 自渲染
- 利用 Skia 重新实现渲染管线，不依赖原生组件
- Flutter
- 架构图
- 小程序
- 使用小程序 DSL + JS 开发，通过中间层桥梁后调用原生能力，使用 WebView 来渲染 UI 界面
3. 常见的跨端技术方案对比
技术方案 视图层 逻辑层 优点 缺点 hybrid 方案 webview webview js thread 开发成本低、CSS 全集、 一致性好 性能中等 原生渲染方案 原生组件 JS Engine 性能好 CSS 子集 、 一致性一般 自渲染方案 Skia Dart VM 性能最好 、 一致性好 CSS 子集 、 Dart 生态一般 、 开发成本高 小程序渲染 webview + 原生组件 JS Engine 开发成本低 、 CSS 全集 、 一致性好 性能较好
4. 基于小程序的一个开发实践
- 快速开发一个小程序
- 下载小程序开发工具
- 小程序开发、 调试
- 小程序上传
- 小程序性能优化
- 小程序性能指标
- LCP 完成时间尽可能短
- 优化方案
- 启动性能
- 减少包的体积
- 合理使用分包 （将首屏用不到文件放入分包中）
- 移除无用文件
- 控制包内的静态资源（将资源通过 CND 的方式进行加载）
- 减少同步逻辑
- 比如获取 storage 数据时使用异步 API 以此避免阻塞同步代码
- 避免启动时运行过多的同步代码
- 更早的展示首屏数据
- 尽早调用关键 API 和请求
- 接入数据预取
- 避免非必要的 reLaunch
- 合理缓存数据
- 对于重复调用的接口，我们可以将网络缓存的结果进行缓存
- 图片优化
- 选择体积压缩率更高的图片 webp
- 进行合理压缩
- 使用 CDN 并开启缓存
- 更多优化手段
- 即使全部使用了上面提到的优化手段，在某些时候还是会出现首屏加载时间过长的问题，此时可以
- 框架骨架屏
- 占位组件
- 运行时性能
- 合理使用 setData
- 减少发送频率
- 动画不使用 setData
- 合理使用自定义组件
- 由于小程序的更新是以 page 为根节点进行全量diff 的，所以我们可以合理的拆分组件数量来减少 diff 的开销，因为如果自定义组件更新那么只会在自定义组件的维度进行 diff
- 只注册当前页面使用的注册，按需注册
- 合理监听处理事件
- 去掉不必要的事件绑定
- 合理监听处理 scroll 事件，处理好节流
- 内存优化
- 及时解绑事件绑定
- 及时清除定时器
- 导航栏适配
- 适当开启自定义导航栏
- 关键信息避开状态栏和胶囊按钮
- X 分屏适配
- 通过 onResize 监听显示区域变化
- 不适用 JS 设置 ScrollView 高度
