page contents

Flutter 2.8 发布 | 性能及工具链优化、Firebase 功能、WebView 3.0

让我们向 Flutter 2.8 打声招呼~ 本次更新包含了 207 位贡献者和 178 位审核者 的辛勤劳作, 所有人共同产出了 2424 个 PR,关闭了 2976 个 issue。

attachments-2021-12-msiSspdv61b69ebb881c1.png

北半球的冬意已至,黄叶与气温均随风而落,而年终的最后一个稳定版本已悄然来到你的面前。 让我们向 Flutter 2.8 打声招呼~ 本次更新包含了 207 位贡献者和 178 位审核者 的辛勤劳作, 所有人共同产出了 2424 个 PR,关闭了 2976 个 issue。 在此特别感谢本次发布中最突出的社区贡献者:来自 Very Good Ventures 的 Flutter 开发工程师 Bartosz Selwesiuk, 他专注于 Web 平台的 camera 插件并提交了 23 个 PR。

以上的所有产出让 Flutter engine 和 DevTools 都有了非常显著的性能提升, 同时带来的还有 Google 移动端广告 SDK Flutter 版本的稳定版发布、 一系列针对 Firebase 的新功能和优化、Flutter WebView 3.0、 新的 Flutter Favorite package、向桌面端 Stable 迈出的一大步, 以及支持更多 package 的新版本 DartPad。 虽然这是今年最后一个稳定版本,但它并不是最不重要的。让我们一起来看看!

性能

Flutter 的首要目标是一如既往地保证其质量。 我们花费了大量时间以确保 Flutter 在多种多样的设备上都能流畅且稳定地运行。

应用启动

本次更新优化了应用启动的延迟。 我们在拥有一百万行以上的代码量的 GPay 应用上进行了测试,以确保改动在实际生产的应用上有效。 这些改动将 GPay 在低端 Android 设备上启动的时间减少了约 50%,高端设备上减少了约 10%。

我们对 Flutter 调用 Dart VM 的 GC 策略也做了一些改进,以此避免在程序启动期间出现不合时宜的 GC。 例如,在 Android 设备上渲染出第一帧前,Flutter 仅在 TRIM_LEVEL_RUNNING_CRITYCAL 及高于其等级的信号出现时,通知 Dart VM 有内存压力 。 在本地测试中,低端 Android 设备的初始帧出现间隔时间最多减少了约 300ms。

在先前的 Flutter 版本中, 出于谨慎考虑 , 在创建 PlatformView 时会阻塞平台线程。 在经过仔细的推理和测试后 , 我们删除了部分序列化的步骤,使得 GPay 在低端设备上的启动时间至少减少了 100ms。

长久以来,在初始化首个 Dart isolate 前初始化默认的字体管理器会引入人为的延迟。 由于它是首要的延迟瓶颈,所以 将默认字体管理器的初始化延迟 到与首个 Dart isolate 同时运行,降低了启动的延迟,并让上述的所有启动优化的表现更加明显。

应用内存

由于 Flutter 会尽可能快地加载 Dart VM 的服务 isolate, 并将其和绑定在应用内的 AOT 代码一并加载到内存中, 这会导致 Flutter 开发人员在部分内存 有限制的设备上难以追踪内存指标 。 在 Flutter 2.8 版本中,Android 设备上 Dart VM 的服务 isolate 已被拆分至单独的 bundle 中 , 可以单独加载,减少了在其加载前约 40MB 的内存使用。 原本 Dart VM 向操作系统发送 AOT 程序的内存用量的通知, 已转由一个无需多次读取的文件支持,后续的内存占用量进一步减少了约 10%。 因此,先前保存了文件数据拷贝的内存可以回收并用于其他用途。

性能分析

某些场景下,开发者希望能同时看到 Flutter 和 Android 的性能追踪事件, 又或者是在生产模式下查看追踪事件来更好地了解应用的性能问题。 为了这一需求,Flutter 2.8 现在可以选择在应用启动后, 将性能追踪事件发送至 Android 的事件记录器,在生产模式下也同样如此。

attachments-2021-12-SCTSjnXE61b69d1c30038.png

此外,一些开发人员想要更多的关于光栅缓存行为的性能跟踪信息, 以减少制作动画效果时的卡顿,这允许 Flutter 快速地对昂贵的、重复使用的图片进行复用而不是重新绘制。 性能跟踪中的新的 流事件让开发人员可以跟踪光栅缓存图片的生命周期。

Flutter DevTools

对于调试性能问题,新版的 DevTools 添加了一个新的「增强跟踪」功能, 用来帮助开发者诊断消耗较大的构建、布局和绘制操作引起的 UI 卡顿。attachments-2021-12-DM5kthLW61b69d3ee4aa3.png

启用任何一个追踪功能后,时间轴中将视情况展示 Widget 的构建、RenderObject 布局和 RenderObject 绘制的事件。

此外,新版的 DevTools 增加了应用程序启动性能的分析支持。 该配置文件包含从 Dart VM 初始化到第一个 Flutter 帧渲染的 CPU 样本。 在你按下「Profile app start up」按钮并加载应用程序启动配置文件后, 你将看到为配置文件选择了「AppStartUp」用户标签。 你还可以通过在可用用户标签列表中选择此用户标签过滤器(如果存在)来加载应用程序启动配置文件。 选择此标签会显示你的应用程序启动的个人资料数据。

Web 平台的平台视图 (PlatformView)

不仅仅是 Android 和 iOS 平台获得了性能提升,本次发布同时包含了对 Flutter Web 平台视图的性能优化。 平台视图是从宿主平台向 Flutter 嵌入 UI 组件的媒介。 Flutter Web 使用 HtmlElementView widget 实现了这一功能,让你能在 Flutter Web 应用中嵌入 HTML 元素。 如果你正在使用 google_maps_flutter 插件或 video_player 插件的网络版本, 或者你正在遵循 Flutter 团队关于 如何优化网络上显示图像 的建议,那么你正在使用平台视图。

在之前版本的 Flutter 中,嵌入平台视图会创建一个新的 canvas,每嵌入一个平台视图都会新增一个 canvas。 创建额外的 canvas 是十分消耗性能的操作,因为每个 canvas 的大小都与整个窗口相等。 在 Flutter 2.8 中,将 复用为先前的平台视图创建的 canvas , 因此,你不会在应用程序的整个生命周期内产生每秒 60 倍的成本,而是只有一次创建的成本。 这意味着你可以在 Web 应用程序中拥有多个 HtmlElementView 实例而不会降低性能, 同时还可以减少使用平台视图时的滚动卡顿。

生态

Flutter 不仅仅是框架、引擎和工具——pub.dev 上现有超过 2w 个与 Flutter 兼容的包和插件,而且每天都在增加。 Flutter 开发人员大量的日常操作也是庞大的生态系统的一部分, 所以让我们来看看自上一个版本以来 Flutter 生态系统中有什么改变。

适用于 Flutter 广告的 Google 广告

首先也是最重要的是, Google Mobile SDK for Flutter 已于 11 月正式发布 。 此版本支持 5 种广告格式,集成了 AdMob 和 Ad Manager 支持, 并包含一个新的中转功能的测试版,可以帮助你优化广告展现的效果。 有关将 Google Ads 集成到 Flutter 应用程序以及其他货币化选项的更多信息, 请查看 flutter.dev 上的页面 。attachments-2021-12-vqGAYxYt61b69d7a14fc0.png

WebView 3.0

这次 Flutter 附带的另一个新版本是 webview_flutter 插件 的 3.0 版本。 因为新功能的数量增加,我们提升了主要版本号,但也因为 Web 视图在 Android 上的工作方式可能发生了重大变化。 在之前的 webview_flutter 版本中,Hybrid composition 已经可用,但不是默认的。 而现在它修复了先前默认以虚拟显示模式运行的许多问题。 根据用户反馈和我们的问题跟踪,我们认为是时候让 Hybrid composition 成为默认设置了。 此外,webview_flutter 还增加了一些呼声极高的功能:

  • 支持使用 POST 和 GET 来加载内容
  • 加载文件或字符串内容为 HTML
  • 支持透明背景
  • 在加载内容前设置 Cookies

此外,在 3.0 版本中,webview_flutter 为新平台提供了初步支持:Flutter Web。 已经有很多人要求能够在 Flutter Web 应用程序中托管 Web 视图, 这允许开发者利用单个源代码库构建移动或 Web 应用程序。 在 Flutter Web 应用程序中托管 Web 视图是什么样的? 从编写代码的角度来看,其实是一样的:

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';
import 'package:webview_flutter_web/webview_flutter_web.dart';

void main() {
  runApp(const MaterialApp(home: HomePage()));
}

class HomePage extends StatefulWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  @override
  void initState() {
    super.initState();

    // required while web support is in preview
    if (kIsWeb) WebView.platform = WebWebViewPlatform();
  }

  @override
  Widget build(BuildContext context) => Scaffold(
    appBar: AppBar(title: const Text('Flutter WebView example')),
    body: const WebView(initialUrl: 'https://flutter.dev'),
  ;
}

在 Flutter Web 上运行时,它会按你的预期工作:

attachments-2021-12-8Pd3VQeE61b69da49412f.png

请注意,当前 webview_flutter 的 web 实现有许多限制,因为它是使用 iframe 构建的, iframe 仅支持简单的 URL 加载,无法控制加载的内容或与加载的内容交互。 但是,由于需求呼声太高,我们决定将 webview_flutter_web 作为未经认可的插件提供。 如果你想尝试一下,请将以下内容添加到你的 pubspec.yaml 中:

dependencies:
  webview_flutter: ^3.0.0
  webview_flutter_web: ^0.1.0 # 显式依赖未经认可的插件

如果你对 webview_flutter v3.0 有任何反馈,无论是否是关于 Web 平台, 请将问题记录在 Flutter 仓库中 。 此外,如果你之前没有使用过 webview 或者你想复习一下, 请查看新的 webview codelab , 它将带你逐步完成在 Flutter 应用程序中托管 web 内容的过程。

Flutter Favorites

Flutter 生态系统委员会再次召开会议,将以下 package 指定为 Flutter Favorite 的 package:

  • 新路由 API(又名 Navigator 2)的三个自定义路由 package: beamer 、 routemaster 和 go_router ;
  • drift , 对 Flutter 和 Dart 已经功能强大且流行的响应式持久性库的重命名,基于 sqlite 构建;
  • freezed , 一个 Dart「语言补丁」,为定义模型、克隆对象、模式匹配等提供简单的语法;
  • dart_code_metrics ;
  • 以及有着漂亮界面的 package: flex_color_scheme 、 flutter_svg 、 feedback 、 toggle_switch 和 auto_size_text 。
祝贺这些 package 的作者,并感谢你通过你的辛勤工作支持 Flutter 社区。 如果你有兴趣提名你最喜欢的 Flutter 包加入 Flutter Favorite 嘉奖, 请按照 Flutter Favorite 计划页面 上的指南和说明进行操作。
更多相关技术内容咨询欢迎前往并持续关注六星社区了解详情。
如果你想用Python开辟副业赚钱,但不熟悉爬虫与反爬虫技术,没有接单途径,也缺乏兼职经验
关注下方微信公众号:Python编程学习圈,获取价值999元全套Python入门到进阶的学习资料以及教程,还有Python技术交流群一起交流学习哦。
attachments-2022-06-NbdH2qa462b17b16135a0.jpeg
  • 发表于 2021-12-13 09:16
  • 阅读 ( 1118 )
  • 分类:行业资讯

你可能感兴趣的文章

相关问题

0 条评论

请先 登录 后评论
轩辕小不懂
轩辕小不懂

2403 篇文章

作家榜 »

  1. 轩辕小不懂 2403 文章
  2. 小柒 1474 文章
  3. Pack 1135 文章
  4. Nen 576 文章
  5. 王昭君 209 文章
  6. 文双 71 文章
  7. 小威 64 文章
  8. Cara 36 文章