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

8,716 阅读6分钟

招贤纳士​

我们急切需要浏览器渲染引擎/Flutter 渲染引擎的人才,欢迎大牛们_加入我们_。

前言

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

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

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

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

总览

Hummer 引擎以业务驱动为核心,结合 U4 内核团队多年的 Web 引擎开发经验,并积极拥抱社区,主要从性能优化、功能增强、配套工具、问题解决四个方面进行深度定制与优化。下文简要介绍了我们接近完成或已经完成的优化成果,这些成果我们后面会陆续在公众号上与读者分享,敬请关注。

重要成果

基于 LLVM 的 AOT 编译器

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

我们的目标是:

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

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

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

混合栈开发方案优化

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

  1. 全屏 Flutter 界面中,部分区域嵌入 Native 控件;
  2. 全屏 Flutter 界面与全屏 Native 界面的互相导航切换;
  3. 全屏 Native 界面中,部分区域嵌入 Flutter 控件。

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

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

掘金无法插入视频,请点击[链接](https://www.bilibili.com/video/BV13A411J7uH/)查看。

针对第二个场景,现有的主流方案经团队评估后发现存在着后续升级难的问题。后续 Hummer 除了参考现有方案提供相似的能力外,还会着重考虑如何降低 Hummer 的升级成本,确保 Hummer 有能力紧随官方的最新版本。针对第三个场景,我们将会结合官方的 Multiple Flutters 方案,开始着手于引擎层面的改造,希望可以实现下面目标:

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

启动及首帧性能优化

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

自适应的 DarkMode 方案

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

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

网络库增强方案

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

相关 PR

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

未来

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

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

关注公众号请搜索 U4内核技术,即时获取最新的技术动态