本文介绍了字节业务在 Flutter 轻量级引擎上的实践历程,介绍了在此过程中遇到的各种各样的问题以及最终使用的解决方案。
作者:字节跳动终端技术——候华勇
一、背景
Flutter 在2.0版本之前混合工程开发对视图级别的开发支持非常有限,在使用过程 Flutter 如果要实现显示卡片视图有两种方式,一种是单引擎模型,通过在不同的 Native 界面中共享同一个容器,iOS上是 FlutterViewController,Android 上为 FlutterActivity,页面在移除和添加容器的同时,在Flutter侧和 Native 侧维护一个展现关系用来保证页面的展示和恢复;另外一种方式是创建一个独立引擎负责新页面展示。方案一的优点是不会产生额外的内存消耗,缺点是会增加维护成本,在不同的使用场景下很容易造成黑屏、白屏、页面无响应等疑难杂症;方案二的优点是简单,缺点是内存增量大、启动慢。官方2.0版本的轻量级引擎为 Flutter 在 View 级别使用上开拓出了一个新的方向,轻量级引擎集合上述两种方案的优点,新创建页面的时候 spawn 一个新的 Engine,新的 Engine 与原 Engine 共享线程和一些C++资源以达到新增引擎但不过多增加内存的目的。
二、方案实现
EngineGroup
![img](https://i-blog.csdnimg.cn/blog_migrate/6f1b08f6809f4ad076b7f5f689e4a5ad.png)
轻量引擎推出了 FlutterEngineGroup 的概念,让同一个 EngineGroup 中的 Engine 对象能够最大程度的共享资源。使用起来也比较简单,创建一个 EngineGroup 然后通过 makeEngine 的方式不断的spawn出来新的轻量级引擎,然后可以使用这些引擎进行页面展现。
内存占用
对于开发者来说轻量级引擎带给大家最大的改善就是内存的增量,我们也对使用轻量级引擎的具体内存增量进行了一些调研测试。
官方数据:双端新增Engine都仅需180KB.https://flutter.dev/docs/development/add-to-app/multiple-flutters
实测Android新增一个Flutter卡片,内存增量0.8M;iOS新增一个FlutterVC,内存增量~3.8-4.8M
FlutterView数量 | 2 | 3 | 4 |
---|---|---|---|
Android内存值 | 68.8 | 69.6 | 70.5 |
iOS内存值 | 39.3 | 42.7 | 47.6 |
跟官方的统计会有一些差别,官方应该是只对引擎创建时候的内存增量进行了统计,并未计算额外的内存消耗,而iOS上的内存增量差异之所以与官方统计有如此之大,是因为官方并未统计具体将 Flutter 页面进行展示时候创建是 iOSurface,而在单引擎中这部分内存在新创建页面的时候是不会额外分配的,可以通过在页面不可见的时候回收来降低内存占用(需要注意的是这部分内存的消耗与具体设备分辨率有关)。
启动速度
Android:速度提升~2.63倍
iOS: 速度提升~9倍
以 FlutterFragment 形式新增卡片,统计为 Engine 开始创建到 onFlutterUiDisplayed
普通方式创建 | EngineGroup创建 | |
---|---|---|
Android 耗时 | 140~150ms | 50~60ms |
iOS 耗时 | 280~300ms | 30~40ms |
因为轻量级引擎是从 EngineGroup 中 spawn 出来的,此时很大一部分共享的内容已经完成了创建,所以在轻量级引擎在创建的时候的耗时是很短的,启动速度也会相应的得到提升,但是需要注意的是 EngineGroup 中首个 Engine 的创建跟在此之前的引擎创建形式是没有区别的,我们暂且称之为主引擎,其他的轻量级引擎从主引擎中 spawn 而来,主引擎的创建耗时可以通过预加载的方式提前加载。