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

124 阅读2分钟

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

跨端是什么

跨端背景

随着业务的发展,产生了越来越多的业务场景,同时随着技术额发展,产生了越来越多的端,PC端、移动端、web端等

常见痛点

  1. 各端功能几乎一致,各端需要单独配置研发人员
  2. 开发、维护成本高
  3. 安卓、IOS发版周期长

跨端技术方案目标

  • 研发效率高

    • 学习成本低
    • 多端一致性高
  • 用户体验好

    • 稳定性高
    • 性能体验好
  • 动态化

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

跨端技术方案介绍

hybrid方案

基于WebView渲染,通过JS Bridgr把一部分系统功能开放到JS调用。

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

image.png

原生渲染方案

React Native

React Native是一个由Facebook于2015年9月发布的一款开源的JavaS框架,它可以让开发者使用Javascript和React来开发跨平台的移动应用。

image.png

自渲染方案

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

Flutter

Fultter是Google在2018年世界移动大会公布的开源应用开发框架,仅通过一套代码库,就能构建精美的、原生平台编译的多平台应用

image.png

小程序方案

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

字节小程序

字节小程序是一种全新的连接用户与服务的方式,它可以在宿主内被便捷地获取和传播,同时具有出色的使用体验

image.png

image.png

image.png

跨端技术方案对比

image.png

基于小程序跨端实践

  1. 下载小程序开发者工具

    小程序开发文档:developer.open-douyin.com/docs/resour…

    小程序开发者工具:developer.open-douyin.com/docs/resour…

  2. 小程序开发、调式

  3. 小程序上传

性能优化

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

性能指标

  • 错误日志
  • 性能体验
    • 小程序加载耗时
    • 取消率
    • 重启率
    • 卡死次数占比
    • LCP到达率
    • 白屏率
    • JS影响用户率

优化手段

image.png

总结

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