这是我参与「第五届青训营 」伴学笔记创作活动的第 10 天,今天学习的内容是跨端技术。将学习的知识记录下来，以便时时巩固记忆。

本堂课的重点内容

• 跨端是什么
• 跨端技术方案介绍
• 基于小程序的跨端技术实践

跨端是什么

为什么会出现跨端技术：

目前存在的问题：

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

跨端技术的优势：

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

跨端技术方案介绍

Hybrid方案：

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

主要的原理是，由Native通过JSBridge等方法提供统一的API，然后用Html+Css实现界面，JS来写逻辑，调用API，最终的页面在Webview中显示，这种模式下，Android、iOS的API一般有一致性，Hybrid App所以有跨平台效果。

优点： 开发和发布都比较方便，效率介于Native App、Web App之间。

缺点： 学习范围较广，需要原生配合。

原生渲染方案：

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

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

自渲染方案：

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

小程序方案：

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

基于小程序的跨端技术实现

小程序性能优化的意义：

• 留住用户
• 提升转化率
• 提升用户体验