跨端技术概述

0x1 跨端

1. 跨端背景

   PC 端（WLM）、移动端（Android/iOS）、web 端、IoT 设备（车载设备、手表）

   常见痛点：

   1. 各端功能区别不多，但需要单独配置开发人员
   2. 开发、维护成本高
   3. Android、iOS 发版周期长

2. 跨端技术方案目标

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

0x2 跨端技术方案介绍

1. Hybrid 方案

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

   graph LR A(JavaScript)-->B(Bridge) B--Platform-->C1(WebView) C1-->C2(Canvas/Events) B--Services-->D1(Location/Bluetooth/Audio/Sensors/Camera/...)

2. 原生渲染方案

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

   • React Native

     由 Facebook 发布的一款开源的 JS 框架，通过 JS 和 React 来开发跨平台的移动应用

     graph LR A(JavaScript)-->B(Bridge) B--Platform-->C1(OEM widgets) C1-->C2(Canvas/Events) B--Services-->D1(Location/Bluetooth/Audio/Sensors/Camera/...)

3. 自渲染方案

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

   • Flutter

     由 Google 发布的一款开源用于开发框架

4. 小程序方案

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

0x3 基于小程序跨端实践

1. 快速开发一个小程序

   1. 下载小程序开发者工具
   2. 开发、调试
   3. 上传

2. 性能优化

   1. 优化意义

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

   2. 性能指标

      graph LR A(Loading)-->B(FP<br/>First Paint) B-->C(LCP<br/>Largest Contentful Paint)

   3. 优化手段

      1. 启动性能体验
         1. 减少包体积
            1. 合理使用分包
            2. 移除无用文件
            3. 控制包内静态资源
         2. 减少同步逻辑
            1. 优先使用异步 API
            2. 避免启动时运行过多同步代码
         3. 更早的展示首屏数据
            1. 尽早调用关键 API 和请求
            2. 接入数据预取
            3. 避免非必要的 reLaunch
         4. 合理缓存数据
            1. 网络数据缓存
            2. API 数据缓存
         5. 图片优化
            1. 选择合适的图片格式
            2. 进行合理的压缩
            3. 使用 CDN 并开启缓存
         6. 其他
            1. 框架骨架屏
            2. 占位组件
      2. 运行时性能体验
         1. 合理使用 setData
            1. 减少发送频率
            2. 动画不使用 setData
         2. 合理使用自定义组件
            1. 合理的拆分组件数量
            2. 只注册当前使用的组件
            3. 同步修改初始 data
         3. 合理监听处理事件
            1. 合理监听处理 scroll 事件
            2. 去掉不必要的事件绑定
         4. 内存优化
            1. 及时解绑事件监听
            2. 及时清理定时器
         5. 导航栏适配
            1. 适当开启自定义导航栏
            2. 关键信息避开状态栏和胶囊按钮
         6. X 分屏适配
            1. 通过 onResize 监听显示区域变化
            2. 不使用 JS 设置 ScrollView 高度

   4. 性能评分工具

      1. Audits
      2. Trace

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

-End-