这是我参与「第五届青训营 」伴学笔记创作活动的第 9 天。

跨端是什么

跨端背景

随着业务发展，产生了越来越多的业务场景，同时随着技术的发展，产生了越来越多的端

常见痛点

• 各端功能几乎一致，各端需要单独配置研发人员
• 开发、维护成本高
• 安卓、ios发版周期长

跨端技术方案目标

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

跨端技术方案技术

hybrid方案

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

原生渲染方案

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

自渲染方案

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

小程序方案

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

基于小程序跨端实践

性能优化的意义

• 留住用户
• 提升转化率
• 提升用户体验

小程序性能指标

• 加载状态Loading
• 部分内容状态FP
• 全部内容LCP
• 希望LCP尽可能的早出现

优化手段

启动性能

• 减少包体积，加快下载
• 减少同步逻辑，减少阻塞
• 更早展示首屏数据
• 合理缓存
• 图片优化

运行性能

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

技术展望

随着端越来越多，跨端的需求会越来越强烈，跨端技术方案也会不断迭代，核心目标仍然是write once，run anywhere。未来自渲染可能会出现更多机会。