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

22 阅读2分钟

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

跨端是什么

在业务的发展过程中,会不断地产生出更多的业务场景,比如PC端,移动端、Web端、LoT设备的等。而每种业务场景又分别对应着不同的开发技术和方案。但是对于同一业务需求,各端的功能基本都是一样的,但却因为技术的具体实现不同,需要配置单独的研发人员,造成开发、维护成本高的问题。为了解决这些问题,跨端技术应运而生。

跨端技术的目标

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

跨端技术方案

1.Hybrid

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

2.原生渲染方案 - React Native

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

3.自渲染方案 - Flutter

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

4.小程序方案

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

性能优化

  1. 性能优化目的
  • 留住用户
  • 提升转化率
  • 提升用户体验
  1. 小程序的性能指标
  • Loading View
  • 首次绘制
  • 最大内容绘制
  • 加载完成
  1. 优化手段

(1)较少包体积

- 合理使用分包
- 使用分包加载是优化小程序启动耗时效果最明显的手段。
- 移除无用文件
- 控制包内静态资源

(2)减少同步逻辑

- 优先使用异步API
- 在小程序初始化代码和启动相关的几个生命周期中,应避免执行复杂的计算逻辑

(3)更早的展示首屏数据

- 尽早调用关键API和请求
- 首屏绘制可能会依赖API数据和网络请求,尽早的调用相关网络请求,能提前数据准备时间
- 接入数据预读取
- 避免非必要的reLaunch

(4)合理缓存数据

- 网络数据缓存
- API数据缓存

(5)图片优化

- 选择合适的图片格式
- 进行合理的压缩
- 使用CDN并开启缓存

(6)其他优化手段

- 骨架框
- 占位组件

4. 运行时性能体验

  • 合理使用setData
  • 合理使用自定义组件
  • 合理监听处理事件
  • 内存优化
  • 导航栏适配
  • X分屏适配

总结

本节课主要对跨端技术和小程序开发相关知识进行了相应的介绍