Flutter · ReactNative技术对比 #

前置知识（操作系统、显卡、OpenGL 之间的关系） #

作为前端开发人员，我们每天的工作就是和实现各种可视化打交道。

但是如果你熟悉计算机的发展历程，计算机在最开始并没有可视化界面一说。直到 20 世纪 80 年代，大规模集成电路工艺技术的飞跃发展，才掀起了计算机大发展大普及的浪潮。可视化界面是计算机能够迅速普及的一个重要原因。 计算机可视化技术的发展伴随着计算机整个计算机技术的发展，直接体现就是显卡技术的发展。

想要理解显卡是什么，我们可以由 CPU 带入理解（这里简单阐述，便于理解）：计算机的本质就是软件驱动硬件。但是软件怎么个驱动法呢？这就需要硬件留接口给软件调用，这个接口就是 CPU 指令集。我们通过汇编对指令集进行封装，通过 C 语言等对汇编进行封装，最后到目前我们用各种各级语言对 C 语言等进行封装实现快速便捷开发。所以所有的计算机编程语言最后都是会被编译为指令集和 CPU 进行交互。而指令集的实现通过不同的硬件厂商实现，经过多年经营竞争，主流的 CPU 厂商只剩下 Inter、ARM 等。

显卡也是如此。

当由 C 语言等的高级语言开发的计算机操作系统日趋成熟，计算机操作系统也就有了可视化的需要。有需要，就有人做！

这就有了显卡：把操作系统 output 的电路信号处理成成可以被显示屏显示的结果，这就是 GPU。

和早期的浏览器对 JavaScript 的支持一样，早期不同厂商的显卡也互不兼容。于是就有了 OpenGL。

OpenGL API 是一套接口，学习这套接口，就可以在那些支持 OpenGL 的机器上正常使用这些接口，在屏幕上看到绘制的结果。这套接口是 Khronos 这个组织在维护，怎么维护呢：就是写一个说明书，指导各个 GPU 厂家。如果他们要支持 OpenGL 的话，要怎么实现一个具体的 OpenGL 库。如果不实现，那么就不算支持 OpenGL。也有一些接口不一定要实现。这和 JavaScript 为什么又叫做 ECMAScript 有着异曲同工之妙。

因此 OpenGL 标准随着时间变化变得越来越详细，并且一直都有新的提案，并且也是伴随着显卡硬件技术的提升而发生变化的。关于显卡技术的发展，感兴趣可以点击 显卡的发展历史：精彩！。

OpenGL 统一了软件输出可视化界面的接口。如果你了解过 JavaScript 库 Threejs，你可能了解过 WebGL（浏览器对 OpenGL ES（OpenGL 的简化版，多用于嵌入式、移动端等） 的封装） 的部分语法，你会发现 OpenGL 用的是一种十分晦涩难懂的着色器语言，同时管线、纹理、缓冲等概念和大量必须的数学、图形学知识都使得 OpenGL 门槛变得很高。但是可视化的程序仍然普及的起来，这是怎么回事呢？

因为有操作系统、浏览器、第三方渲染引擎等。目前主流的个人电脑搭载的计算机操作系统，都在底层对 OpenGL 做了封装，同时开放部分这些接口给开发者，使其开发能运行于当前操作系统的应用程序，当然开发者也可以直接调用 OpenGL 直接和 GPU 通信。

以安卓为例：安卓系统使用 Java 语言开发，安卓源码中对 OpenGL 进行了封装，使得安卓开发工程师只需用 Java + XML 就可以开发出各式 UI 的应用，而无需关心如何调用 OpenGL，如何给定点着色，如何渲染等等。如果你想要直接调用 OpenGL 方法与 GPU 通信，只需要引入官方维护的 android.opengl 即可。当然，这种场景通常都是一些游戏场景，引入的也都是 U3D、Skia 等第三方渲染引擎等做游戏性能优化（安卓系统本身使用 Java 开发，通过安卓系统（Java 虚拟机）和 OpenGL 通信远远没有直接调用 OpenGL 性能好）。

关于浏览器相关的知识这里不再赘述，有兴趣自行查阅相关资料[1]。

以上就是对操作系统、显卡、OpenGL 之间的关系的概述，为了方便理解，跟多地方做了简化处理。明白三者之间的关系和原理是怎么回事，会让你对所谓跨平台应用的发展现状和未来方向有着更为清晰的认识。

跨平台应用技术的现状 #

因为本次针对的是移动端跨平台应用对比，因此这里只对能运行于 Android 和 iOS 系统的应用进行对比。

随着 Nodejs 出现，前端百花齐放，目前已有的跨平台技术包括但不仅限于：

• H5
• 微信小程序
• uniapp
• Weex
• ReactNative
• flutter

以上是国内主流的的移动端跨平台方案，各有特色。

H5 #

概述：运行于手机浏览器或者 APP 中的网页

优点：框架众多，开发迅速，生态繁荣，可以通过 JSBridge 与原声 APP 通信实现原生功能

缺点：没有原生能力，通过 JSBridge 与原声 APP 通信实现原生功能性能差

小程序 #

概述：运行于各类宿主 APP 重的微应用

优点：开发便捷，可直接调用宿主 APP 原生能力

缺点：性能差，内容、类目受制于平台规则约束

uniapp #

概述：网页套壳 APP MUI 升级版，使用 vue 作为开发语言

优点：开发便捷，案例丰富

缺点：性能差，BUG 修复缓慢

Weex #

概述：阿里开源的跨平台开发工具

优点：vue 语法开发 APP

缺点：彻头彻尾的 KPI 产物，已无人维护

RN #

概述：Facebook 开源的跨平台开发工具

优点：前端 react 易上手，高性能，

缺点：无官方组件库，社区和个人作者维护，很多组件包括动画需要自己封装

flutter #

概述：Google 开源跨平台开发框架，Google 下一代手机操作系统 fuchsia 默认编程框架

优点：高性能，开发体验好，社区活跃，官方库众多

缺点：需掌握 Dart，IOS 不支持升级热更新

RN VS flutter #

注：截止 2021/10/08

参考资料 #

全网最全 Flutter 与 React Native 深入对比分析

Flutter 与 React Native - 2021 年该选择什么？