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

前端技术栈之跨段技术概述｜ 青训营笔记

跨端背景

随着业务的发展，产生了越来越多的业务场景及需求，同时随着技术的发展，产生了越来越多的端，如：PC端（Windows,Nac）,移动端（安卓，ios），web端，IoT设备（车载设备，手表）等。

常见痛点：

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

跨端技术好处

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

跨端技术方案介绍

Hybrid方案

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

原生渲染方案

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

如：

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

自渲染方案

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

如：

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

小程序方案

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

如：

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

技术方案	视图层	优点
Hybrid方案	webview	开发成本低，CSS全集，一致性好 缺点：性能中等
原生渲染方案	原生组件	性能好， 缺点： CSS子级，一致性一般
自渲染方案	Skia	性能最好，一致性好 缺点： css子集，Dart生态一般 ， 开发成本高
小程序方案	webview + 原生组件	开发成本低，CSS全集，一致性好 缺点： 性能较好

总结

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