这是我参与「第五届青训营 」伴学笔记创作活动的第 9 天
重点内容： 🍍跨端技术分类🍍 🍇跨段技术方案🍇 🍈小程序🍈
🍉前言🍉
今天学习了跨端相关的知识，一起来回顾一下跨端的基础内容吧~
🍊分类🍊
- PC端：Windows、Mac
- 移动端：安卓、iOS
- web端：网页
- IoT设备：车载设备，智能手表
🍍产生背景🍍
多端产品各端功能几乎一致，然而却需要单独配置相应的研发人员，不论是开发、还是维护的成本都比较高，加上安卓、iOS 发版周期长。例如多端有可能在PC端没有bug，然而安卓端却有bug，这样的问题很难去处理。因此便产生了跨段技术！
🍌方案目标🍌
研发效率高：容易学习和理解，同时在多端上保持较高的一致性。 用户体验好：稳定性高，在不同设备上都能拥有较好的性能。 动态化：支持动态化更迭，满足日益增长的业务需求。
🍋跨端技术方案介绍🍋
hybrid方案
基于WebView渲染，通过JS Bridge把一部分系统能力开放给JS调用。
前端开发一个前端页面，一方面它有正常的前端展示能力，另一方面通过bridge可以调用一些系统的API，从而实现类似原生应用的样子。
Platform比如像安卓、iOS通过WebView视图结合UI实现常见操作。Services包括各种服务，比如定位，蓝牙，音频等。
原生渲染方案 - React Native
使用JS开发，通过中间层桥接后使用原生组件来染UI 界面。
React Native与hybrid方案最大的不同在于底层渲染的原理不同，一个是原生组件OEM widgets，另一个是浏览器的内容Web View。虽然原生组件效率更高，但是内容却十分受限。
自渲染方案 - Flutter
利用Skia重新实现渲染管线不依赖原生组件。
rendering进行渲染，channels进行通信。基于Widgets进行开发，把很多widgets组装起来形成一个应用。大部分内容都是自己绘制的，所以并不依赖于系统或者平台，只有一些非UI的内容需要用到服务。
小程序方案
使用小程序 DSL + JS 开发，通过中间层桥接后调用原生能力，使用webview 来渲染 UI 界面。
🍐跨段技术方案对比🍐
| 技术方案 | 视图层 | 逻辑层 | 优点 | 缺点 |
|---|---|---|---|---|
| hybrid 方案 | webview | webview JSthread | 开发成本低;CSS 全集;一致性好 | 性能中等 |
| 原生渲染方案 | 原生组件 | JS Engine | 性能好 | CSS子集;一致性一般 |
| 自渲染方案 | Skia | Dart VM | 性能最好;一致性好 | CSS 子集;Dart生态一般;开发成本较高 |
| 小程序方案 | webview + 原生组件 | JS Engine | 开发成本低;CSS全集;一致性好 | 性能较好 |
🫐小程序优化🫐
优化意义
1. 留住用户 2. 提升转化率 3. 提升用户体验
优化手段
🍒总结🍒
跨端技术可能应用在很多层次，我们最熟悉的应该就是小程序了。通过分析小程序的可优化内容，可以对跨端技术要解决的问题有一个更深刻的认识，同时也对跨端技术有了更深刻的理解！
