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

甘古
108 阅读5分钟

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

一、什么是跨端

1.跨端背景

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

常见痛点

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

2.跨端技术方案目标

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

二、跨端技术方案介绍

1.Hybrid方案

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

image.png

2.原生渲染方案-React Native

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

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

image.png

思路： React Native 的思路是最大化地复用前端的生态和 Native 的生态，和 WebView 容器的最大区别在于 View 的渲染体系。React Native 抛弃了低效的浏览器内核渲染，转而使用自己的 DSL 生成中间格式，然后映射到对应的平台，渲染成平台的组件。相对 WebView 容器，体验会有一定的提升。不过，渲染时需要 JavaScript 和原生之间通信，在有些场景可能会导致卡顿。另外就是，渲染还是在Native层，要求开发人员对Native有一定的熟悉度。

组成： React Native 主要由JSI、Fabric、TurboModules 组成。

JSI：

  • JSI是Javascript Interface的缩写，一个用C++写成的轻量级框架，它作用就是通过JSI，JS对象可以直接获得C++对象(Host Objects)引用，并调用对应方法。有了JSI，JS和Native就可以直接通信了,调用过程如下：JS->JSI->C++->ObjectC/Java
  • JSI是整个架构的核心和基石，所有的一切都是建立在它上面
  • JSI 将支持其他 JS 引擎
  • JSI 允许线程之间的同步相互执行，不需要 JSON 序列号等耗费性能的操作
  • JSI 是用 C++ 编写，以后如果针对电视、手表等其他系统，也可以很方便地移植

自此三个线程通信再也不需要通过Bridge，可以直接知道对方的存在，让同步通信成为现实。具体的用法可以看官方例子。 另外一个好处就是有了JSI，JS引擎不再局限于JSC，可以自由的替换为V8,Hermes，进一步提高JS解析执行的速度。

Fabric：

  • Fabric 是新的渲染系统，它将取代当前的 UI Manager
    • UI Manager：当 App 运行时，React 会执行你的代码并在 JS 中创建一个 ReactElementTree ，基于这棵树渲染器会在 C++ 中创建一个 ReactShadowTree。UI Manager 会使用 Shadow Tree 来计算 UI 元素的位置，而一旦 Layout 完成，Shadow Tree 就会被转换为由 Native Elements 组成的 HostViewTree（例如：RN 里的 会变成 Android 中的 ViewGroup 和 iOS 中的 UIView）

之前线程之间的通信都发生在 Bridge上，这就意味着需要在传输和数据复制上耗费时间。通过JSON格式来传递消息，每次都要经历序列化和反序列化。 而得益于前面的 JSI， JS 可以直接调用 Native 方法，其实就包括了 UI 方法，所以 JS 和 UI 线程可以同步执行从而提高列表、跳转、手势处理等的性能。

Turbo Modules：

  • 在之前的架构中 JS 使用的所有 Native Modules（例如蓝牙、地理位置、文件存储等）都必须在应用程序打开之前进行初始化，这意味着即使用户不需要某些模块，但是它仍然必须在启动时进行初始化

  • Turbo Modules 基本上是对这些旧的 Native 模块的增强，正如在前面介绍的那样，现在 JS 将能够持有这些模块的引用，所以 JS 代码可以仅在需要时才加载对应模块，这样可以将显着缩短 RN 应用的启动时间

3.自渲染方案

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

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

image.png

4.小程序方案

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

5.跨端技术方案对比

image.png

三、基于小程序跨端实践

1.快速开发一个小程序

  • 下载小程序开发者工具
  • 小程序开发、调试
  • 小程序上传

2.小程序性能优化-优化意义

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

小程序性能 是指小程序在APP中加载和呈现的速度，以及用户交互的响应程度。性能问题是多种多样的，情况好点的，有的小程序会产生一些延迟，这些延迟会给用户带来一些不好的交互体验。也有极其糟糕的情况，那就是小程序完全无法使用，对用户输入没有反应，或两者兼而有之。这些问题将在不同程度上影响用户体验，从而导致用户流失。

四、技术展望

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

五、课后总结

本章学习了跨端技术的相关知识，随着业务的发展，各种端之间的联系和跨越成为一种大趋势，本节课大致了解学习了主流跨端技术方案以及小程序的开发与实践，而随着端越来越多，跨端的需求会越来越强烈，跨端技术的方案也会不断迭代，跨端学习之路任重而道远。

avatar
文章
阅读
粉丝