U4 内核团队再出发，打造全新 Flutter 渲染引擎 —— Hummer_vlambda技术博客

vlambda
2020-08-13

U4 内核团队再出发，打造全新 Flutter 渲染引擎 —— Hummer

前言

Flutter 可以说是近两年来最火爆的移动跨平台方案，无论是创新型应用还是老牌旗舰型应用，都在或多或少地尝试 Flutter 技术。基于以下三点优势，Flutter 正在逐渐焕发光彩：

不同于 Weex、RN 等方案，Flutter 采用自绘渲染，实现跨端跨平台运行高度一致性；
简化的渲染流水线设计及极致的 AOT，提供了媲美 Native 的性能；
Google 强大的技术支撑及迅速扩大的生态。

虽然 Flutter 看起来非常美好，但是它毕竟只是一个有潜力的新生儿。随着业务的逐渐深度使用，业务同学在 Flutter 上面遇到了一些难以解决的问题，这些问题需要从引擎层面进行优化和改造。于是，U4 内核团队也开始投身到 Flutter 的洪流当中，希望能通过团队的技术，给业务带来更好的体验。

为了便于交流和区分，我们的 Flutter 定制引擎以 Hummer 为代号。Flutter 意为抖动翅膀，Google 寓意流畅的性能，Hummer 即蜂鸟，世界上抖动翅膀最快的鸟，也是最小的鸟。我们希望 U4 内核团队定制的 Flutter 引擎，可以像蜂鸟一样小巧迅捷，同时又可以帮助业务开发出如蜂鸟一样漂亮的应用。

总览

重要成果

基于 LLVM 的 AOT 编译器

虽然 Dart AOT 产物做了极致的优化，使得它的运行性能可以媲美 Java、C++ 等老牌语言，但是整个编译流水线仍然有优化空间。我们通过对 Dart 编译器进行改造，利用 LLVM 编译器生成代码尺寸小性能高的特点，可以有效地减少引擎产物尺寸，并且提高代码运行性能。

U4 内核团队再出发，打造全新 Flutter 渲染引擎 —— Hummer

我们的目标是：

AOT 生成代码性能提升 30%
AOT 代码生成尺寸减少 30%

目前 arm32、arm64 已经通过所有测试，正在进入最后的优化阶段，很快就可以接入使用。

目前官方也在关注我们编译器的优化工作，希望达到效果后能贡献给社区。

混合栈开发方案优化

虽然 Flutter 官方支持与 Native 应用混合开发，但是到目前为止，Flutter 对混合开发的支持仍然不够友好，它存在的一些问题，一直是开发者心中的剧痛。混合开发主要体现在三个场景：

全屏 Flutter 界面中，部分区域嵌入 Native 控件；
全屏 Flutter 界面与全屏 Native 界面的互相导航切换；
全屏 Native 界面中，部分区域嵌入 Flutter 控件。

针对第一个场景，我们通过挖洞混合渲染方式，解决原生混合渲染方案性能、兼容性差的问题。测试场景下，FlutterView 帧率最高有 28% 的优化、嵌入的 PlatformView 帧率最高有 50% 的优化。

以下视频中，左侧是优化前的效果，右侧是优化后的效果。

针对第二个场景，现有的主流方案经团队评估后发现存在着后续升级难的问题。后续 Hummer 除了参考现有方案提供相似的能力外，还会着重考虑如何降低 Hummer 的升级成本，确保 Hummer 有能力紧随官方的最新版本。

针对第三个场景，我们将会结合官方的 Multiple Flutters 方案，开始着手于引擎层面的改造，希望可以实现下面目标：

FlutterView 可以灵活地在各种不同场景下使用，全屏、内嵌作为 Tab 、Card 、Cell 等等；
创建 2+ FlutterView 对系统资源和内存占用的额外占用较小，初始化开销更小，应用可以更放心地同时使用多个 FlutterView；
在复杂业务场景下提供有效的内存峰值控制机制，减少业务对内存占用的担心，并且不需要业务的 Flutter App 修改代码；
在 Framework 和容器层提供一套 API ，实现数据共享（Flutter App 之间，Flutter 和 Native 之间）。

启动及首帧性能优化

我们对 Hummer 引擎的启动和首帧做了针对性的优化。优化后的引擎给实际业务带来了巨大的性能改善。业务实际统计得到的结果为，启动耗时减少80%，首帧耗时减少60%。

U4 内核团队再出发，打造全新 Flutter 渲染引擎 —— Hummer

自适应的 DarkMode 方案

对标 Chromium 的自适应 DarkMode 方案，实现界面一键切换 DarkMode，不需要重新设计主题，极大提升业务方的研发效率。

下图是我们使用开源 flutter_deer 工程，增加 DarkMode 扩展语法后运行在 Hummer 上的效果。感兴趣的读者也可以自行查看该工程自己实现的 DarkMode 的效果。

U4 内核团队再出发，打造全新 Flutter 渲染引擎 —— Hummer

U4 内核团队再出发，打造全新 Flutter 渲染引擎 —— Hummer

网络库增强方案

Hummer 引擎可以不依赖原生的网络库，通过外接网络库来增强网络能力，实现网络请求速度翻倍。

U4 内核团队再出发，打造全新 Flutter 渲染引擎 —— Hummer

相关 PR

尽管参与 Flutter 引擎优化时间不长，但 U4 内核团队已经多次向主线提交 PR，大部分 PR 目前已经合入。我们希望通过这种方式，提升阿里巴巴在 Flutter 社区的影响力，也促进整个 Flutter 生态的发展，让 Flutter 为业务方带来更大的价值。

未来

U4 内核团队，专注渲染引擎 & 虚拟机技术十数年。作为阿里巴巴集团经济体共建 Flutter 的重要参与方，积极拥抱社区，力求给业务带来最大化的价值提升。Hummer 是我们深度定制优化的 Flutter 引擎，融合了团队在 Web 引擎上的多年技术沉淀。欢迎从事相关技术研究或基于 Flutter 构建应用的同学提出宝贵的意见或建议。

U4内核致力于打造性能最好、最安全的web平台，让web无所不能。

关注请长按二维码