这是我参与「第五届青训营 」伴学笔记创作活动的第 33 天，之前呢，我们学习了跨端技术，下面就是我在课堂上学习的知识：

跨端是什么？

跨端：一端开发，多端运行。有开发成本低、开发周期短、开发难度小等诸多优点。

跨端的背景：随着业务的发展产生了越来越多的业务场景，同时随着技术的发展，产生了越来越多的端：pc端（Windows，Mac），web端（网页），移动端（安卓，ios），loT设备（车载设备，手表）等。

常见的痛点：1.各端功能几乎一致，各端需要单独配置研发人员。2.开发维护成本高。3.安卓，ios发版周期长。等问题。

跨端技术方案的目标是：1.研发效率高（学习成本低，多端一致性高）。2.用户体验好（稳定性高，性能体验好）。3.动态化（支持动态化下发，满足日益增长的业务需求）。

跨段技术方案介绍

hybrid方案

基于WebView渲染，通过JS Bridge把一部分系统能力开发给JS调用。WebView容器的工作原理是基于Web技术来实现界面和功能，通过将原生的接口封装，暴露给JavaScript调用，JavaScript编写的页面可以运行在系统自带的WebView中，这样做的优势是，对于前端开发者比较友好，可以很快地实现页面跨端，同时保留调用原生的能力，通过搭建桥接层和原生能力打通。但这种设计，跨端的能力受限于桥接层，当调用之前没有的原生能力时，就需要增加桥。另外浏览器内核的渲染独立于系统组件，无法保证原生体验，渲染的效果会差不少。

原生渲染方案

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

React Native主要有JSI,fabric，TurboModules组成（这三个有些复杂，推荐上网搜索）

自渲染方案

使用Skia重新实现渲染管线，不依赖原生组件。 flutter是Google在2018年世界移动大会公布的开源应用开发框架，仅通过一套代码库，就能构建精美的，原生平台编译的多平台应用

小程序方案

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

跨端技术对比：

小结

上面的是主流跨端技术方案。谢谢大家阅读。