前端与跨端技术方案 ｜ 青训营笔记

申晓玉
345 阅读5分钟

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

详细知识点

1、跨端技术方案目标

（1）用户体验好

  • 学习成本低
  • 多端一致性高

（2）研发效率高

  • 稳定性高
  • 性能体验好

（3）动态化

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

2、跨端技术方案

  1. hybrid方案
  2. 原生渲染方案
  3. 自渲染方案
  4. 跨端技术方案对比

3、hybrid方案

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

逻辑：使用JS进行开发，视图用WebView渲染

hybrid即“混合”,前端和客户端的混合开发模式

WebView简单理解为浏览器，具有跨平台实现的能力。移动端（安卓/iOS）都提供了WebView能力：可以打开一个web页面，可以打开一个url进行一个展示

前端能力有限，例如调取蓝牙能力、文件能力、获取地理位置，这些对于JS都是没有的。需要（安卓/iOS等）系统把这些能力开放给WebView。        通过WebView+JS Bridge这样的桥接，整体实现这个方案可以运行在各个端。

4、原生渲染方案

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

image.png 逻辑：使用JS进行开发，视图用原生组件渲染

在Android开发中是使用Kotin或Java来编写视图;在i0S开发中是使用Swift或Objective-C来编写视图,在React Native中，则使用React组件通过 JavaScriot来调用这些视图。在运行时，ReactNative 为这些组件创建相应的 Android和ios视图。由于ReactNative组件就是对原生视图的封装，因此使用ReactNative编写的应用外观、感觉和性能与其他任何原生应用一样。我们将这些平台支持的组件称为原生组件。

原生渲染和Hybrid最大的区别：渲染底层原理不同，一个浏览器，一个是Native原生组件，

原生组件：例如安卓组件，安卓上描述一个组件可能是test，但是在移动端可能是span或div等容器。

最大的亮点：OEM widgets，原生渲染的效率比webview更高。

这也是为什么大家吐槽h5经常卡体验差，而原生渲染极大的避免或缓解这个问题。但原生组件会受限很多，我们只能用有限的能力，对应系统提供的能力，有些样式可能缺失无法实现。

实现原理

D3C.png JSI（JavaScript Interface），即JS接口，是由C++写成的轻量级框架。作用：通过JSI可以直接操纵C++对象，好处是在JS这一层可以直接拿到C++对象，省去通信过程中反复序列化的过程，是性能优化的产物。

FABRIC是跟UI相关的，对应OEM widgets，作用：当你想绘制一个test，帮助映射成native的一个test组件，对接到native，相当于一个桥接层，做一层转发。

TURBO MODULES，是逻辑代码

系统能力怎么实现呢？ JSI调到C++，C++到了TURBO MODULES，然后TURBO MODULES对接到系统的API 。例如get location获取地理位置实现过程：JS实现，通过JSI调用TURBO MODULES，再调到native。

5、自渲染方案

自渲染是更底层的实现

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

Skia，开源的渲染引擎，抛弃原生的（安卓、iOS等提供的）组件，不会受限，自己定制实现想要的能力。

flutter

7FHS.png flutter能力分为三层，每层面向的开发者不一样

  • 常规Flutter开发者在最上层，大部分开发者是基于Framework提供的能力（大部分是Widgets，一些Widgets组装起来就是一个应用）
  • 中层：Engine是最大的核心，用C++编写，最重要的是渲染部分（Rendering和Composition）。包含的内容很多：图形渲染、文本布局，文件，网络IO，插件系统，dart工具链，辅助功能等。
  • 下层：系统基本能力，不是核心部分

6、小程序方案

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

W6L.png

小程序的运行环境分成渲染层和逻辑层，其中ttml模板和ttss样式工作在渲染层，js脚本工作在逻辑层。

小程序的渲染层和逻辑层分别由个线程管理:渲染层的界面使用了WebView进行渲染，逻辑层采用JSC线程运行JS脚本。一个小程序存在多个界面，所以渲染层存在多个Webview线程，这两个线程的通信会经由客户端(下文中也会采用Native来代指客户端)做中转，逻辑层发送网络请求也经由Native转发，小程序的通信模型如图所示

与Hybrid方案有些像，但又做了很多优化。最大区别：是一个多WebView，且JS运行在一个独立的JSC运行环境。

渲染层用Webview，因为前端对JS、CSS熟悉，且没有原生的诸多系统限制。

逻辑层JSC（是 JavaScriptCore）单独JS的一个运行环境，简单理解成V8

渲染层、逻辑层，最终与Native进行对接，实现很多能力，例如：网络能力、定位能力、蓝牙能力。

7、跨端技术方案对比

IU0~3MFJKBAM_JSU0)SVDJG.png 基于不同场景去选择使用不同技术方案，性能要求高：用原生渲染或自渲染，性能要求没那么高，用hybrid；另外小程序是产品方案，开放平台，让更多开发者接入进来。

avatar
文章
阅读
粉丝