跨端背景
常见痛点:
-
各端功能几乎一致,各端需要单独配置研发
-
开发、维护成本高
-
安卓、ios发版周期长
跨端技术方案目标
- 研发效率高
-
- 学习成本低
- 多端一致性高
- 用户体验好
-
- 稳定性高
- 性能体验好
- 动态化
-
- 支持动态化下发,满足日益增长的业务需求
跨端技术方案介绍
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来渲染界面
字节小程序的渲染方案
四种方案对比
基于小程序跨端实践
性能优化
意义
- 留住用户
- 提升转化率
- 提升用户体验
小程序性能指标
****
目标:LCP尽可能提前
优化手段: