Testing Flutter apps翻译-性能分析

翻译首页

当咱们说到移动开发，性能对用户体验是极其重要的。用户但愿应用程序的滚动是平滑的，动画是有意义的，程序没有卡顿和被跳过的帧，这被称做“jank.” （什么东西？可是原文是这个）。咱们如何确保咱们的应用程序在各类设备上都不受任何影响?

这里有两条选择：

1. 咱们能够在不一样的设备上手动测试应用程序。这种方法可能只适用于小型应用程序，随着应用的变大这种方法将会变的很是麻烦。
2. 咱们能够运行集成测试去执行一个具体的任务而且记录性能时间线。而后，咱们须要查看结果再去肯定咱们应用程序的特定部分代码是否须要被优化。

在本文里，咱们将会学习到当执行一个特定的任务的时候如何编写记录性能时间线的测试，而且将结果摘要记录到本地文件。

步骤：

1. 编写一个滚动列表的测试。
2. 记录应用程序的性能。
3. 保存结果到磁盘。
4. 运行测试。
5. 查看保存的结果。

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

在本文里，咱们将会记录一个列表应用程序的性能。为了聚焦在性能分析上，本文代码基于 Scrolling in integration tests 这篇文章。

请根据本文讲解建立一个应用程序，一个可测试的应用程序，而且编写测试代码去验证一切是否按预期工做。

2. 记录应用程序的性能。

下一步，咱们须要记录应用程序在滚动时候的性能。为了完成这个任务，咱们可使用FlutterDriver提供的traceAction 方法。

此方法运行传入的函数参数并记录Timeline，其中包含有关应用程序性能的详细信息。在这个例子里，咱们提供了一个函数去滚动列表，确保一个特定的 item 被显示。当这个函数完成之后，这个traceAction方法返回一个Timeline。

// Record a performance timeline as we scroll through the list of items
final timeline = await driver.traceAction(() async {
  await driver.scrollUntilVisible(
    listFinder,
    itemFinder,
    dyScroll: -300.0,
  );

  expect(await driver.getText(itemFinder), 'Item 50');
});
复制代码

3. 保存结果到磁盘。

如今咱们获得了一个性能分析时间线，咱们须要一个方法去查看它！这个Timeline对象提供了发生过的全部事件的详细信息，可是没有提供一个方便的方法去查看结果。

因此，咱们能够转换Timeline为TimelineSummary。这个TimelineSummary能够执行两个任务来让查看Timeline结果变的简单：

1. 它能够在硬盘写一个包含了Timeline汇总数据的json文档。这个汇总包括了跳过的帧的数量，最慢的build时间等信息。
2. 它能将已完成的Timeline保存为json文件存储到硬盘里。这个文件能够用Chrome浏览器的chrome://tracing页面中的跟踪工具打开。

// Convert the Timeline into a TimelineSummary that's easier to read and // understand. final summary = new TimelineSummary.summarize(timeline); // Then, save the summary to disk summary.writeSummaryToFile('scrolling_summary', pretty: true); // Optionally, 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.
summary.writeTimelineToFile('scrolling_timeline', pretty: true);
复制代码

4. 运行测试。

在咱们配置咱们的测试去捕获Timeline的性能分析结果并编写将结果保存到硬盘的代码之后，咱们能够运行下面的命令来测试：

flutter drive --target=test_driver/app.dart
复制代码

5. 查看保存的结果。

在测试完成之后，项目根目录的build文件夹下面会生成两个文件：

1. scrolling_summary.timeline_summary.json 包含总结摘要。能够用任意文本编辑器打开该文件以查看其中的信息。经过更高级的设置，咱们能够保存每次测试运行的总结摘要而且能够将这些结果作成图表。
2. scrolling_timeline.timeline.json 包含完成的timeline数据。 用Chrome浏览器的chrome://tracing页面中的跟踪工具打开该文件。这个追踪工具提供了一个方便的界面来分析timeline数据，该工具能够找到性能问题的源头。

总结摘要文件内容的示例：

{
  "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
  ]
}
复制代码

完整代码：

import 'package:flutter_driver/flutter_driver.dart';
import 'package:test/test.dart';

void main() {
  group('Scrollable App', () {
    FlutterDriver driver;

    setUpAll(() async {
      driver = await FlutterDriver.connect();
    });

    tearDownAll(() async {
      if (driver != null) {
        driver.close();
      }
    });

    test('verifies the list contains a specific item', () async {
      final listFinder = find.byValueKey('long_list');
      final itemFinder = find.byValueKey('item_50_text');

      // Record a performance profile as we scroll through the list of items
      final timeline = await driver.traceAction(() async {
        await driver.scrollUntilVisible(
          listFinder,
          itemFinder,
          dyScroll: -300.0,
        );

        expect(await driver.getText(itemFinder), 'Item 50');
      });

      // Convert the Timeline into a TimelineSummary that's easier to read and // understand. final summary = new TimelineSummary.summarize(timeline); // Then, save the summary to disk summary.writeSummaryToFile('scrolling_summary', pretty: true); // Optionally, 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.
      summary.writeTimelineToFile('scrolling_timeline', pretty: true);
    });
  });
}
复制代码