跨端技术 | 青训营笔记

东非不开森
79 阅读3分钟

这是我参加【第五届青训营】笔记创作活动的第8天

一、跨端是什么

使得一套代码可以适配目前越来越多的业务场景，比如：PC（window、mac），移动端（安卓、IOS），web，IOT设备（车载设备、手表） 所以我们要实现的目标是：

  • 研发效率高——学习成本低、多端一致

  • 用户体验好——稳定性好，性能体验好

  • 动态化——支持动态下发，满足日益增长的业务需求

常见痛点

image.png

二、常见方案

2.1.Hybrid方案

基于 webview 渲染界面，通过 JS bridge 把一部分功能系统开放给 JS 调用：

2.2.原生渲染方案

通过 js 开发，通过中间层桥接之后使用原生组件来渲染我们的 UI

React Native

image.png

image.png

image.png

image.png

image.png

2.3.自渲染方案

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

Flutter 使用 Dart 语言开发，页面渲染不依赖平台 系统能力依赖于平台提供

2.4.小程序方案

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

image.png

  • 对比

image.png

三、小程序跨端实现

小程序性能

程序性能是指小程序在字节系AP(抖音、今日头条等客户端)中加载和星现的速度，以及用户交互的偏应程度。性约问题是多种多样的，情况抒点的，有的租房会产生一些延因，这些还迟会给用户带来一些不开的交体验。也有极其糟糕的情况，那就是小程序完全无法使用，对用户输入没有反应，或两者兼而有之。这些问题将在不同程度上影响用户体验，从而导致用户流失。

小程序性能优化

image.png 二、启动性能体验

  1. 合理使用分包

  • 使用分包加或是优化小程序启阈蚝耗时效果最明显的手段。建议开发者按照功能划分，将小程序的功能按使用频率和场景拆分成分包，实现代码包的按需加载或。同时需要注意控制分包数量，避兔过多拆包,移除无用文件

  • 目前小程序打包是会将工程下所有文件都打入代码包内，在开发迭代过程中，如果不及时清理无用的资源，会使得包体积越来越大，开发过程中要养成良好的习惯-…及时情理没有使用到的资源，防止资源沉余。控制包内静态资源

  • 避免在代码包中包含或在ts中内联过多、过大的代码包内的图片，应尽星采用网络图片。代码包内的图片一般应只包含一些体积较小的图标。声音、视频嬖其他类型的资源应尽星避兔放到代码包中，小程序代码包在下载时会使用Gzip.算法进行压缩，降低下载时传输的数据量。这些资源文件会占用大星代码包体积，并且通常难以进一步被压维，对于下载耗时的影响比代码文件要大很多。

  1. 减少同步逻辑优先使用异步API
  • 在小程序启动流程中，会注入开发者代码并顺序同步执行App.onLaunch, App.onShow, Page.onLoad,Page.onShow。在小程序初始化代码(Page、App定义之外的内容)和启动相关的几个生命周期中，应避免过度使用Sync结尾的同步API 避免启动时运行过多同步代码
  • 在小程序初始化代码(Page，App定义之外的内容）和启动相关的几个生命周期中，应避免执行复杂的计算逻辑。2.3更早的展示首屏数据
avatar
文章
阅读
粉丝