flutter渲染_渲染“外部纹理”：Flutter优化案例

flutter渲染

优化开源SDK Flutter处理Android和iOS应用程序外部纹理的方式

本文是阿里巴巴的“ 利用颤振” 系列的一部分。

在计算中，就像在日常生活中一样，任何给定的方法都可以在其潜在的缺陷达到决定性的僵局之前看到大量的用途。 对于阿里巴巴来说，发现软件开发工具包Flutter中的一个缺陷意味着该小组最近为其闲鱼二手交易平台开发的移动应用程序的成功与失败之间的区别。

现在，阿里巴巴团队已经针对先玉市场独特的新用途成功地对Flutter进行了优化，为整个UI渲染过程实施了OpenGL流程，以减少CPU和GPU资源的开销。

在今天的文章中，我们将研究小组的优化工作，并详细介绍Flutter的内部工作原理和“外部纹理”，技术读者可以在自己的工作中进行探索。

Flutter渲染框架

Flutter渲染框架被组织为一系列的层，每个层都在前一层之上。 Flutter渲染框架的体系结构设计如下所示：

Flutter渲染框架，逐层

1. 层树 ：渲染管道是Dart API在运行时输出的树状结构。 树上的每个叶节点都代表一个界面元素，例如按钮，图像等。

2. Skia ：由Google赞助和管理的跨平台渲染框架。 它充当iOS / Android应用程序的图形引擎。 Skia的底层称为OpenGL绘图。 Vulkan支持非常有限，Metal不提供支持。

3. Shell ：一种平台功能，包括iOS / Android平台实现，EAGLContext管理，在屏幕上返回数据以及外部纹理实现。

布局过程在Dart运行时执行，并输出一个Layer树。 在管道中遍历“层”树的每个叶节点，以调用Skia引擎来完成界面元素的绘制。

完成上述过程后，请执行以下操作：

1. iOS： 运行glPresentRenderBuffer命令以在屏幕上显示渲染缓冲区的内容。
Android：运行glSwapBuffer命令在当前窗口使用的图层上执行缓冲区交换。

2.单击“完整的屏幕显示”链接。

基于此原理，Flutter可以在本机和Flutter Engine上实现UI隔离。 它还捕获UI代码，而无需