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

跨端技术学习记录

跨端是什么

跨端的背景

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

常见痛点

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

跨端技术方案目标

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

跨端技术方案介绍

Hybrid方案

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

基本原理如下：

原生渲染方案

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

React Natvie

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

基本原理如下:

基本架构：

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

React Native 是一主要有 JSI、Fabric、TurboModules 组成。

JSI 是 Javascript Interface 的缩写，一个用 C++ 写成的轻量级框架，它的作用就是通过 JSI，JS 对象可以直接获得 C++ 对象(Host Object)引用，并调用对应方法。
Fabric 是最新的渲染系统，它将取代当前的 UI Manager;
Turbo Modules 基本上是对这些旧的 Native 模块的增强，正如在前面介绍的那样，现在 JS 将能够持有这些模块的引用，所以 JS 代码可以仅在需要时才加载对应模块，这样可以将显着缩短 RN 应用的启动时间。

自渲染方案

利用开源的渲染引擎 Skia 重新实现渲染管线，不依赖原生组件。

Flutter

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

基本原理如下：

小程序方案

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

字节小程序

字节小程序的运行逻辑：

方案对比

技术方案	视图层	逻辑层	优点	缺点
Hybird方案	webview	webview	1. 开发成本低 2. CSS全集 3. 一致性好	1. 性能中等
原生渲染方案	原生组件	JS Engine	1. 性能好	1. CSS子集 2. 一致性一般
自渲染方案	Skia	Dart VM	1. 性能最好 2. 一致性好	1. CSS子集 2. Dart 生态一般 3. 开发成本较高
小程序方案	webview + 原生组件	JS Engine	1. 开发成本低 2. CSS 全集 3. 一致性好	1. 性能较好

基于小程序的跨端实践

如何快速开发一个小程序

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

小程序开发者工具下载

2. 小程序开发和调试

基本界面：

3. 小程序优化

性能优化的意义
（1）留住用户
（2）提升转化率
（3）提升用户体验

优化手段

性能评分工具

性能分析工具

总结

在本次学习中，学习了跨平台的技术方案有Hybird方案、原生渲染方案、自渲染方案和小程序方案。并且了学习了这些跨平台技术方案的实现原理和框架。
通过学习，使用了字节跳动的小程序开发者工具，可以通过该工具学习基本的开发模式。同时也学习了小程序的优化手段，在不同的运行时间里，有着不同的优化方式，总共多达12种优化手段。也学习了如何通过性能评分工具和性能分析工具来对自己的程序进行合理地优化。

引用

「跨端技术概述」第五届字节跳动青训营 - 前端专场 (juejin.cn)

跨端技术学习记录｜青训营笔记