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

1. 概述

随着业务的发展，产生了越来越多的业务场景，同时随着技术的发展，产生了越来越多的端，PC端（Windows、Mac)，移动端(安卓、iOS). web端、IoT设备（车载设备、手表）等，这样的背景下产生很多痛点如：

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

这时就产生我们的跨端技术

跨端技术方案需要实现的目标有：

• 学习成本低
• 多端一致性高
• 稳定性高
• 性能体验好
• 支持动态下发，满足日益增加的业务需求

2.常见的跨端技术方案

2.1 hybrid 方案

基于WebView渲染，通过JSBridge 把一部分能力开发给JS调用

优点

对前端开发者比较友好， 可以很快地实现页面跨端，同时保留调用原生的能力，通过搭桥接层和原生能力打通

缺点

跨端能力受限与桥接层，当调用之前没有的原生能力时， 就需要增加桥， 宁外浏览器内核的渲染独立于系统组件

2.2 原生渲染方案

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

React Native 是一个由FaceBook 于2015年9月发布的一款开源的javaScript框架，他可以让开发者使用JavaScript和React来开发跨平台的移动应用

2.3 自渲染方案

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

Fullter 是Google 在2018 年世界移动大会公布的开源应用开发框架,仅通过一套代码库,就能构建精美的， 原生平台编译的多平台应用

2.4 小程序方案

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

字节小程序是一种全新的链接用与服务器的方式，它可以在宿主（抖音，头条）内被边界的获取和传播， 同时具有出色的使用体验

2.5 跨端技术对比

技术方案	试图层	逻辑层	优点	缺点
hybrid 方案	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.性能较好