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

95 阅读2分钟

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

课堂笔记

本堂课重点内容

  • 跨端是什么
  • 跨端技术方案介绍(目前主流的跨端技术方案)
  • 基于小程序跨端实践

具体内容

跨端是什么

随着业务的发展,产生了越来越多的业务场景,同时随着技术的发展,产生了越来越多的端,PC端(Windows Mac),移动端(安卓iOS)、web端、IoT设备(车载设备、手表)等

常见痛点:

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

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

跨端技术方案介绍

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

image.png

原生渲染方案
使用JS开发,通过中间层桥后使用原生组件来渲染UI界面
比如React Native:
React Native是一个由Faacebook于2015年9月发布的一款开源的JavaScript框架,它可以让开发者使用JavaScript和React来开发跨平台的移动应用。

image.png

image.png

自渲染方案
利用SKia重新实现渲染管线,不依赖原生组件
比如Flutter:
Flutter是Google在2018年世界移动大会的开源应用开发框架,仅通过一套代码库,就能构建精美的、原生平台编译的多平台应用。

image.png

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

比如字节小程序:

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

image.png

image.png

小程序性能优化的意义

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

性能优化手段:

image.png