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

34 阅读2分钟

跨端背景

常见痛点:

  1. 各端功能几乎一致,各端需要单独配置研发

  2. 开发、维护成本高

  3. 安卓、ios发版周期长

跨端技术方案目标

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

跨端技术方案介绍

Hybird方案

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

原生渲染方案

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

  • CSS样式上有一定的缺失、能力受限
  • 渲染更快,比WebView更快

  • 橙色部分和绿色部分是核心部分
  • JSI(JavaScript Interface),由C++写成的轻量级框架,可直接操纵C++对象,在JS这一层可以直接拿到C++对象,是性能优化的产物
  • FABRIC与UI相关,和OEM widgets对应,映射成Native,是一个桥接层,做一层转发
  • TURBO MODULES , 调用系统能力,JSI调用C++,C++到TURBO MODULES,再到NATIVE

自渲染方案

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

Skia是开源渲染引擎,抛弃原生提供的组件

Flutter

通过一套代码库,可构建多平台的应用

小程序方案

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

字节小程序的渲染方案

四种方案对比

基于小程序跨端实践

性能优化

意义

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

小程序性能指标

****

目标:LCP尽可能提前


优化手段:

性能评分工具