跨端技术概述| 青训营笔记

这是我参与「第五届青训营 」伴学笔记创作活动的第10天，下面跟我一起看看青训营跨端部分讲了什么吧~

1.跨端背景

随着业务的发展，产生了越来越多的业务场景，同时随着技术的发展，产生了越来越多的端，PC端（Windows、Mac），移动端（安卓、IOS）、Web 端、IoT设备（车载设备、手表）等。

2.跨端面临的问题

1. 各端功能几乎一致，各端需要单独配置研发人员
2. 开发、维护成本高
3. 安卓、IOS 发版周期长

3.跨端技术的目标

1. 研发效率高（学习成本低、多端一致性高）
2. 用户体验好（稳定性高、性能体验好）
3. 动态化（支持动态化下发）

4.跨端技术方案介绍

1. Hybrid方案：基于 WebView 渲染，通过 JS Bridge 把一部分系统能力开放给 JS 使用

Hybird 是利用 native 作为宿主环境既底层框架，通过原生应用打开 webview 的方法实现 H5 的上层开发，使业务透明化。

2. 原生渲染方案：使用JS开发，通过中间层桥接后使用原生组件来渲染UI界面(如React Native)

3. 自渲染方案：利用开源的渲染引擎 Skia 重新实现渲染管线，不依赖原生组件（如Flutter)

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

5.跨端技术方案对比

技术方案	视图层	逻辑层	优点	缺点
Hybird方案	webview	webview JS thread	1. 开发成本低 2. CSS全集 3. 一致性好	1. 性能中等
原生渲染方案	原生组件	JS Engine	1. 性能好	1. CSS子集 2. 一致性一般
自渲染方案	Skia	Dart VM	1. 性能最好 2. 一致性好	1. CSS子集 2. Dart 生态一般 3. 开发成本较高
小程序方案	webview + 原生组件	JS Engine	1. 开发成本低 2. CSS 全集 3. 一致性好	1. 性能较好

6.技术展望

随着端越来越多，跨端的需求会越来越强烈，跨端技术方案也会不断迭代，核心目标仍然是 [ write once ,run anywhere ] ，未来自渲染可能会出现更多机会。