这是我参与「第五届青训营 」伴学笔记创作活动的第 10 天
跨端是什么
随着业务的发展，产生了越来越多的业务场景，同时随着技术的发展，产生了越来越多的端，PC端(Windows、Mac) ，移动端(安卓、iOS) 、web端、IoT 设备 (车载设备、手表) 等
常见痛点
1.各端功能几乎一致，各端需要单独配置研发人员
2.开发、维护成本高
3.安卓、iOS 发版周期长
优点
- 研发效率高
-
- 学习成本低
- 多端一致性高
- 用户体验好
-
- 稳定性高
- 性能体验好
- 动态化
-
- 支持动态化下发，满足日益增长的业务需求
跨端及时方案
基于 WebView 渲染，通过 JS Bridge 把一部分系统能力开放给 JS 调用
WebView容器的工作原理是基于Web技术来实现界面和功能，通过将原生的接口封装、暴露给JavaScript调用，JavaScript编写的页面可以运行在系统自带的WebView中。这样做的优势是，对于前端开发者比较友好，可以很快的实现页面跨端，同时保留调用原生的能力，通过搭建桥接层和原生能力打通。但这种设计，跨端的能力受限于桥接层，当调用之前没有的原生能力时，就需要增加桥。另外，浏览器内核的渲染独立于系统组件，无法保证原生体验，渲染的效果会差不少。
原生渲染方案
使用 JS 开发，通过中间层桥接后使用原生组件来渲染 UI 界面
React Native
React Native 是一个由 Facebook 于 2015 年 9 月发布的一款开源的 JavaScript 框架，它可以让开发者使用 JavaScript 和 React 来开发跨平台的移动应用。
React Native 的思路是最大化地复用前端和生态和Native的生态，和WebView容器最大区别在于View的渲染体系。React Native抛弃了低效的浏览器内核渲染，转而使用自己的DSL生成中间格式，然后映射 到对应的平台，渲染成平台的组件。相对WebView容器，体验会有一定的提升。不过，渲染时需要JavaScript和原生之间通信，在有些场景可能会导致卡顿。另外就是，渲染还是在Native层，要求开发人员对Natice有一定的熟悉度。
自渲染方案
利用 Skia 重新实现染管线，不依赖原生组件
Flutter
Flutter 是 Google 在 2018 年世界移动大会公布的开源应用开发框架，，仅通过套代码库，就能构建精美的、原生平台编译的多平台应用.
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 运行环境及编译环境的工具链。
总结:跨端的本质是提效
