使用集成测试衡量性能

如何为 Flutter 应用进行性能分析。

在移动应用方面，性能对用户体验至关重要。用户期望应用具有流畅的滚动和有意义的动画，没有卡顿或跳帧，这被称为“卡顿”。如何确保您的应用在各种设备上都没有卡顿？

有两种选择：首先，手动在不同设备上测试应用。虽然对于较小的应用，这种方法可能有效，但随着应用规模的扩大，它会变得更加繁琐。或者，运行一个执行特定任务并记录性能时间线的集成测试。然后，检查结果以确定应用中的特定部分是否需要改进。

在本教程中，学习如何编写一个记录性能时间线的同时执行特定任务并将结果摘要保存到本地文件的测试。

本示例将采取以下步骤

编写一个滚动列表项的测试。
记录应用的性能。
将结果保存到磁盘。
运行测试。
检查结果。

在本教程中，记录应用在滚动列表项时的性能。为了专注于性能分析，本教程基于小部件测试中的滚动教程。

按照该教程中的说明创建一个应用并编写一个测试来验证一切是否按预期工作。

接下来，记录应用在滚动列表时的性能。使用 traceAction() 方法执行此任务，该方法由 IntegrationTestWidgetsFlutterBinding 类提供。

此方法运行提供的函数并记录一个 Timeline，其中包含有关应用性能的详细信息。此示例提供了一个滚动列表项的函数，以确保显示特定项。当函数完成时，traceAction() 创建一个报告数据 Map，其中包含 Timeline。

当运行多个 traceAction 时，指定 reportKey。默认情况下，所有 Timelines 均使用键 timeline 存储，在本示例中，reportKey 已更改为 scrolling_timeline。

dart

await binding.traceAction(() async {
  // Scroll until the item to be found appears.
  await tester.scrollUntilVisible(
    itemFinder,
    500.0,
    scrollable: listFinder,
  );
}, reportKey: 'scrolling_timeline');

现在您已经捕获了性能时间线，您需要一种方法来查看它。Timeline 对象提供有关发生的所有事件的详细信息，但它没有提供一种方便的方法来查看结果。

因此，将 Timeline 转换为 TimelineSummary。TimelineSummary 可以执行两项任务，使查看结果更容易

将包含在 Timeline 中的数据的 json 文档写入磁盘。此摘要包括有关跳过的帧数、最慢的构建时间等信息。
将完整的 Timeline 作为 json 文件保存到磁盘。可以使用 Chrome 浏览器中位于 chrome://tracing 的跟踪工具打开该文件。

要捕获结果，请在 test_driver 文件夹中创建一个名为 perf_driver.dart 的文件，并添加以下代码

dart

import 'package:flutter_driver/flutter_driver.dart' as driver;
import 'package:integration_test/integration_test_driver.dart';

Future<void> main() {
  return integrationDriver(
    responseDataCallback: (data) async {
      if (data != null) {
        final timeline = driver.Timeline.fromJson(
          data['scrolling_timeline'] as Map<String, dynamic>,
        );

        // Convert the Timeline into a TimelineSummary that's easier to
        // read and understand.
        final summary = driver.TimelineSummary.summarize(timeline);

        // Then, write the entire timeline to disk in a json format.
        // This file can be opened in the Chrome browser's tracing tools
        // found by navigating to chrome://tracing.
        // Optionally, save the summary to disk by setting includeSummary
        // to true
        await summary.writeTimelineToFile(
          'scrolling_timeline',
          pretty: true,
          includeSummary: true,
        );
      }
    },
  );
}

integrationDriver 函数有一个 responseDataCallback，您可以自定义它。默认情况下，它将结果写入 integration_response_data.json 文件，但您可以自定义它以生成像本示例中的摘要。

配置测试以捕获性能 Timeline 并将结果摘要保存到磁盘后，使用以下命令运行测试

flutter drive \
  --driver=test_driver/perf_driver.dart \
  --target=integration_test/scrolling_test.dart \
  --profile

--profile 选项意味着为“profile 模式”而不是“debug 模式”编译应用，以便基准测试结果更接近最终用户将体验到的结果。

测试成功完成后，项目根目录的 build 目录包含两个文件

scrolling_summary.timeline_summary.json 包含摘要。使用任何文本编辑器打开该文件以查看其中包含的信息。通过更高级的设置，您可以每次运行测试时保存摘要并创建结果图表。
scrolling_timeline.timeline.json 包含完整的时间线数据。使用 Chrome 浏览器中位于 chrome://tracing 的跟踪工具打开该文件。跟踪工具提供了一个方便的界面，用于检查时间线数据以发现性能问题的原因。

json

{
  "average_frame_build_time_millis": 4.2592592592592595,
  "worst_frame_build_time_millis": 21.0,
  "missed_frame_build_budget_count": 2,
  "average_frame_rasterizer_time_millis": 5.518518518518518,
  "worst_frame_rasterizer_time_millis": 51.0,
  "missed_frame_rasterizer_budget_count": 10,
  "frame_count": 54,
  "frame_build_times": [
    6874,
    5019,
    3638
  ],
  "frame_rasterizer_times": [
    51955,
    8468,
    3129
  ]
}

integration_test/scrolling_test.dart

dart

import 'package:flutter/material.dart';
import 'package:flutter_test/flutter_test.dart';
import 'package:integration_test/integration_test.dart';
import 'package:your_package/main.dart';

void main() {
  final binding = IntegrationTestWidgetsFlutterBinding.ensureInitialized();

  testWidgets('Counter increments smoke test', (tester) async {
    // Build our app and trigger a frame.
    await tester.pumpWidget(
      MyApp(items: List<String>.generate(10000, (i) => 'Item $i')),
    );

    final listFinder = find.byType(Scrollable);
    final itemFinder = find.byKey(const ValueKey('item_50_text'));

    await binding.traceAction(() async {
      // Scroll until the item to be found appears.
      await tester.scrollUntilVisible(
        itemFinder,
        500.0,
        scrollable: listFinder,
      );
    }, reportKey: 'scrolling_timeline');
  });
}

test_driver/perf_driver.dart

dart

import 'package:flutter_driver/flutter_driver.dart' as driver;
import 'package:integration_test/integration_test_driver.dart';

Future<void> main() {
  return integrationDriver(
    responseDataCallback: (data) async {
      if (data != null) {
        final timeline = driver.Timeline.fromJson(
          data['scrolling_timeline'] as Map<String, dynamic>,
        );

        // Convert the Timeline into a TimelineSummary that's easier to
        // read and understand.
        final summary = driver.TimelineSummary.summarize(timeline);

        // Then, write the entire timeline to disk in a json format.
        // This file can be opened in the Chrome browser's tracing tools
        // found by navigating to chrome://tracing.
        // Optionally, save the summary to disk by setting includeSummary
        // to true
        await summary.writeTimelineToFile(
          'scrolling_timeline',
          pretty: true,
          includeSummary: true,
        );
      }
    },
  );
}

此页面内容有帮助吗？

除非另有说明，此网站上的文档反映了 Flutter 3.38.6。页面上次更新于 2025-10-30。查看源代码或报告问题。

使用集成测试衡量性能

1. 编写一个滚动列表项的测试

2. 记录应用的性能

3. 将结果保存到磁盘

4. 运行测试

5. 检查结果

摘要示例

完整示例