这是我参与「 第五届青训营 」伴学笔记创作活动的第 19 天。
前言
今天是 2023 年 2 月 2 日星期四，癸卯年正月十二。
元宵节快到了，依然祝大家兔年快乐🐰
今天跟着熊乐老师学习了跨端技术及其应用。虽然中途出现了断网的事件，也算是好事多磨，一波三折。
今日课程概述
- 跨端的定义，介绍了跨端产生的背景及解决的问题
- 跨端技术方案简介，说明目前主流的跨端技术方案（hybrid 方案/原生渲染方案/自渲染方案/小程序方案）以及它们之间的对比
- 基于小程序跨端实践，讲解如何开发一个小程序以及优化小程序
- 总结与展望
跨端技术优势
研发效率高，用户体验好，动态化。
研发效率：学习成本低，多端一致性较高。
用户体验：稳定性高，用户的使用体验较优。
动态化：支持动态化下发，可以有效满足业务日益增长的技术需求。
跨端技术之 hybrid 方案
基于 WebView 渲染，通过 JavaScript Bridge 将一部分系统能力开放给 JavaScript 进行调用。WebView 容器的工作原理是基于 Web 技术来实现界面和功能，通过将原生的接口封装、暴露给 JavaScript 调用，JavaScript 编写的页面可以运行在系统自带的 WebView 中。
这样做的优势是，对于前端开发者比较友好，可以很快地实现页面跨端，同时保留调用原生的能力，通过搭建桥接层和原生能力打通。但这种设计，跨端的能力受限于桥接层，当调用之前没有的原生能力时，就需要额外增加桥。另外，浏览器内核的渲染独立于系统组件，无法保证原生体验，渲染的效果会差不少。
跨端技术之原生渲染方案
React Native 的思路是最大化地复用前端的生态和 Native 的生态，和 WebView 容器的最大区别在于 View 的渲染体系。React Native 抛弃了低效的浏览器内核渲染，转而使用自己的DSL生成中间格式，然后映射到对应的平台，渲染成平台的组件。相对WebView容器，体验会有一定的提升。不过，渲染时需要 JavaScript 和原生之间通信，在有些场景可能会导致卡顿。另外就是，渲染还是在 Native 层，要求开发人员对 Native 有熟悉度。
React Native主要由JSI、 Fabric、 TurboModules 组成。
跨端技术之自渲染方案
2018年，Google 推出 Flutter，通过 Dart 语言构建了一套跨平台的开发组件，所有组件基于 Skia 引擎自绘，在性能上可以和 Native 平台的 View 相媲美。Flutter 站在前人的肩膀上，参考了 React 的状态管理、Web 的自绘制 UI、React Native 的 HotReload 等特性，同时考虑了与 Native 通信的 Channel 机制、自渲染、完备的开发工具链。Flutter 与 上述 Recat Native、WebView 容器本质上都是不同的，它没有使用WebView、JavaScript解释器或者是系统平台自带的原生控件，而是有一套自己专属的 Widget，底层渲染使用自身的高性能 C/C++ 引擎自绘。
对于底层操作系统而言，Flutter 应用程序的包装方式与其他原生应用相同。在每一个平台上， 都包含一个特定的嵌入层，从而提供一个程序入口，程序由此可以与底层操作系统进行协调，访问 诸如 surface 渲染、辅助功能和输入等服务，并且管理事件循环队列。该嵌入层采用了适合当前平台的语言编写，例如 Android 使用的是 Java 和 C++，iOS 以及 macOS 使用的是Objective-C 和 Objective-C++，Windows 和 Linux 使用的是 C++。Flutter 代码可以通过嵌入层，以模块方式集成到现有的应用中，也可以作为应用的主体。Flutter 本身包含了各个常见平台的嵌入层，同时也存在一些其他的嵌入层。
Flutter 引擎毫无疑问是 Flutter 的核心，它主要使用 C++ 语言编写，并提供了 Flutter 应用所需的原语。当需要绘制新的一帧的内容时，引擎将负责对需要合成的场景进行栅格化。它提供了 Flutter 核心 API 的底层实现，包括图形(通过 Skia)、文本布局、文件及网络IO、辅助功能支持、插件架构和Dart运行环境及编译环境的工具链。
跨端技术之小程序方案
微信小程序、支付宝小程序、字节小程序在国内近几年非常火爆。
小程序的运行环境分成渲染层和逻辑层，其中 ttml 模板和 ttss 样式工作在渲染层，JS 脚本工作在逻辑层。
小程序的渲染层和逻辑层分别由2个线程管理：渲染层的界面使用了 WebView 进行渲染，逻辑层采用 JSC 线程运行 JS 脚本。单个小程序会存在多个界面，所以渲染层也存在多个 WebView线程，这两个线程的通信会经由客户端即 Native 做中转，逻辑层发送网络请求也经由 Native 进行转发。
