这是我参与「第五届青训营 」伴学笔记创作活动的第 16 天

一、跨端背景

1、背景描述：

随着业务发展，有许多业务场景也随之产生。同时随着技术的发展，许多端也随之产生：PC端（Windows、Mac、Linux），移动端（安卓、ios）、web端、IoT设备 (车载设备、手表)等。

2、痛点：

在出现的平台多了之后，带来的痛点也随之多了起来。

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

二、跨段技术方案目标

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

三、跨段技术方案介绍

1、Hybrid方案：

• 简介：基于WebView渲染，通过JS Bridge把一部分系统能力开放给JS调用。
• 视图层：webview 平台
• 逻辑层：webview JS thread
• 优点：开发成本低、CSS全集、一致性好
• 缺点：性能中等

字节中许多应用都使用该方案，因为其可以高效率完成任务。

2、原生渲染方案：

• 简介：使用JS开发，通过中间层桥接后使用原生组件来渲染UI界面。
• 视图层：原生组件
• 逻辑层：JS Engine
• 优点：性能好
• 缺点：CSS子集、一致性一般

React Native可以让开发者使用JavaScript和React去开发跨平台的移动应用。

3、自渲染方案：

• 简介：利用Skia重新实现渲染管线，不依赖原生组件。
• 视图层：Skia
• 逻辑层：Dart VM
• 优点：性能最好、一致性好
• 缺点：CSS子集、Dart生态一般、开发成本较高

Flutter是Google发布的一个用于创建跨平台、高性能移动应用的框架。Flutter仅通过一套代码库，就能够构建原生平台渲染的多平台应用。

4、小程序方案：

• 简介：小程序DSL+JS开发，通过中间层桥接之后调用原生能力，使用webview来渲染UI界面。
• 视图层：webview+原生组件
• 逻辑层：JS Engine
• 优点：开发成本低、CSS全集、一致性好
• 缺点：性能较好

不同方案适合于不同的场景，所以要根据应用场景来选择不同的跨端解决方案。