Flutter快学快用24讲--23 架构原理：为什么 Flutter 性能更佳

本课时将继续深入源码，学习 Flutter 渲染原理，特别是为什么 Flutter 可以保持比较好的性能体验。

性能优势

在这之前，业内一直都说 Flutter 的性能优于其他的跨端技术框架，并且基本与原生平台体验几乎一样。那么具体是怎么做到的呢？在了解 Flutter的自渲染原理之前，我们就先来看看原生平台 Android 与 iOS 是如何渲染 UI 的。经过前后对比之后，更能体现出其性能与原生几乎无差异的特点。

UI 渲染基本原理

我们先来讲解一个最基础的知识点，日常我们所看到的 UI 交互界面，操作系统是如何实现的，参考下图 1 的渲染过程。

图1 系统 UI 界面绘制原理

从图 1 我们可以看到，一个界面显示出来，首先是经过了 CPU 的数据计算，然后将数据发送给到 GPU， GPU 再根据相应的数据绘制成像素界面，然后放入帧缓存区中，最终显示器定时从帧缓存区获取帧数据显示在显示器上。

在上面的渲染实现过程中，需要进行 CPU 和 GPU 之间的通信。因此，如何调度 GPU 是一个比较关键的点，目前有一套规范叫作 OpenGL，开发者可以通过这套规范，更方便、更高效地调用 GPU进行界面渲染。Android 和iOS 系统都在系统层面实现了这套功能，将其分别封装成 SDK API。而在 Flutter 中也实现了这套规则，也就是应用 OpenGL 规范封装了一套 Dart API，因此 Flutter 的渲染原理和 Android 以及 iOS 是一致的，所以在性能上基本没有区别。

了解了 Flutter 渲染原理以后，我们再来看看目前比较常用的两个跨端框架的渲染原理。

其他跨端技术框架渲染原理

目前比较常见的两个跨端技术框架，分别是 ReactNative 和 Weex。它们在原理上非常相近，因此这里单独介绍 ReactNative 的原理。我们先来看下图 2 的一个技术架构。

图2 ReactNative 技术架构图

从图 2 ，我们可以非常清晰地看到一点，ReactNative 完全是基于原生平台来进行渲染的，而这之间主要是通过 JSbridge 来通信，将需要渲染的数据通过 JSbridge 传递给原生平台。这样的通信方式在 Flutter 中也有，在我们第 20 课时“原生通信：应用原生平台交互扩充 Flutter 基础能力”中有介绍到，这部分和 ReactNative 比较相近。而两者的最大的区别就在于， Flutter UI 界面是自渲染的，而 ReactNative 则是通过通信的方式告知原生平台，然后原生平台再绘制出界面。。

我们再回到最原始的跨端技术框架 Hybrid ，它是界面上使用 H5 ，其他功能则使用 JSbridge 来调用原生服务，因此并不会使用原生绘制界面，而仅仅只使用了原生平台能力。

以上就是三种技术框架的对比说明，我们再来总结下三种框架突出解决的问题点，其次也说明当前框架存在的问题点。

• Hybrid 是在图 2 中仅仅支持了原生能力，例如相机、存储、日历等，而 UI 交互界面则还是H5，因此不管是体验和性能都是相对较差的。

• ReactNative为了解决页面性能问题，同样应用 JSbridge 通信方式，将虚拟 DOM 以及页面渲染相关数据，传递给到原生平台，原生平台则根据虚拟 DOM 以及渲染相关数据，绘制出原生体验的界面，这样用户感知上就是原生的界面，但是这个过程中需要进行 J