跳至主要內容
目錄

使用整合測試測量效能

目錄

對於行動應用程式來說，效能對於使用者體驗至關重要。使用者期望應用程式具有流暢的滾動效果和有意義的動畫，並且沒有卡頓或跳幀（稱為「jank」）。如何確保您的應用程式在各種裝置上都沒有 jank 呢？

有兩種選項：第一，在不同的裝置上手動測試應用程式。雖然這種方法對於較小的應用程式可能有效，但隨著應用程式規模的增長，它會變得更加繁瑣。或者，執行一個整合測試，該測試會執行特定任務並記錄效能時間軸。然後，檢查結果以確定應用程式的特定部分是否需要改進。

在此範例中，學習如何編寫一個測試，該測試會在執行特定任務時記錄效能時間軸，並將結果摘要儲存到本機檔案。

此範例使用以下步驟

  1. 編寫一個測試，該測試會滾動瀏覽項目列表。
  2. 記錄應用程式的效能。
  3. 將結果儲存到磁碟。
  4. 執行測試。
  5. 檢閱結果。

1. 編寫一個測試，該測試會滾動瀏覽項目列表

#

在此範例中，記錄應用程式在滾動瀏覽項目列表時的效能。為了專注於效能分析，此範例建立在小工具測試中的滾動範例的基礎上。

按照該範例中的說明建立應用程式並編寫測試，以驗證一切都按預期運作。

2. 記錄應用程式的效能

#

接下來，記錄應用程式在滾動瀏覽列表時的效能。使用 traceAction() 方法執行此任務，該方法由 IntegrationTestWidgetsFlutterBinding 類別提供。

此方法會執行提供的函式，並記錄一個 Timeline，其中包含有關應用程式效能的詳細資訊。此範例提供了一個函式，該函式會滾動瀏覽項目列表，確保顯示特定項目。當函式完成時，traceAction() 會建立一個包含 Timeline 的報告資料 Map。

當執行多個 traceAction 時，請指定 reportKey。預設情況下，所有 Timeline 都會儲存在金鑰 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',
);

3. 將結果儲存到磁碟

#

現在您已擷取效能時間軸，您需要一種方法來檢閱它。Timeline 物件提供有關所有已發生事件的詳細資訊，但它沒有提供檢閱結果的方便方法。

因此，請將 Timeline 轉換為 TimelineSummary。TimelineSummary 可以執行兩項任務，使其更容易檢閱結果

  1. 在磁碟上寫入一個 json 文件，其中摘要包含在 Timeline 內的資料。此摘要包含有關跳幀次數、最慢的建置時間等資訊。
  2. 將完整的 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 檔案，但您可以自訂它以產生像此範例中的摘要。

4. 執行測試

#

在設定測試以擷取效能 Timeline 並將結果摘要儲存到磁碟後，請使用以下命令執行測試

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

--profile 選項表示將應用程式編譯為「效能分析模式」而不是「偵錯模式」，以便基準測試結果更接近最終使用者將體驗到的結果。

5. 檢閱結果

#

在測試成功完成後，專案根目錄中的 build 目錄會包含兩個檔案

  1. scrolling_summary.timeline_summary.json 包含摘要。使用任何文字編輯器開啟該檔案以檢閱其中包含的資訊。透過更進階的設定，您可以每次執行測試時都儲存摘要，並建立結果圖表。
  2. 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:scrolling/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 的最新穩定版本。頁面最後更新時間為 2024-05-20。 檢視原始碼 或 回報問題。