Mide el rendimiento con una prueba de integración

Cuando se trata de aplicaciones móviles, el rendimiento es fundamental para la experiencia del usuario. Los usuarios esperan que las aplicaciones tengan un desplazamiento suave y animaciones significativas libres de tirones o fotogramas perdidos, lo que se conoce como "jank". ¿Cómo asegurarte de que tu aplicación esté libre de jank en una amplia variedad de dispositivos?

Hay dos opciones: primero, probar la aplicación manualmente en diferentes dispositivos. Si bien ese enfoque puede funcionar para una aplicación más pequeña, se vuelve más engorroso a medida que la aplicación crece. Como alternativa, ejecuta una prueba de integración que realice una tarea específica y registre una línea de tiempo de rendimiento. Luego, examina los resultados para determinar si es necesario mejorar una sección específica de la aplicación.

En esta receta, aprende a escribir una prueba que registre una línea de tiempo de rendimiento mientras realiza una tarea específica y guarde un resumen de los resultados en un archivo local.

Esta receta utiliza los siguientes pasos:

1. Escribe una prueba que se desplace por una lista de elementos.
2. Registra el rendimiento de la aplicación.
3. Guarda los resultados en el disco.
4. Ejecuta la prueba.
5. Revisa los resultados.

En esta receta, registra el rendimiento de una aplicación mientras se desplaza por una lista de elementos. Para enfocarnos en el perfilado de rendimiento, esta receta se basa en la receta Desplazamiento (Scrolling) de las pruebas de Widgets.

Sigue las instrucciones de esa receta para crear una aplicación y escribir una prueba que verifique que todo funciona como se espera.

A continuación, registra el rendimiento de la aplicación mientras se desplaza por la lista. Realiza esta tarea utilizando el método traceAction() proporcionado por la clase IntegrationTestWidgetsFlutterBinding .

Este método ejecuta la función proporcionada y registra un Timeline con información detallada sobre el rendimiento de la aplicación. Este ejemplo proporciona una función que se desplaza por la lista de elementos, asegurándose de que se muestre un elemento específico. Cuando la función se completa, el traceAction() crea un Map de datos de informe que contiene el Timeline.

Especifica la clave reportKey cuando ejecutes más de un traceAction. Por defecto, todos los Timelines se almacenan con la clave timeline; en este ejemplo, la clave reportKey se cambia a scrolling_timeline.

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

Ahora que has capturado una línea de tiempo de rendimiento, necesitas una forma de revisarla. El objeto Timeline proporciona información detallada sobre todos los eventos que tuvieron lugar, pero no proporciona una forma cómoda de revisar los resultados.

Por lo tanto, convierte el Timeline en un TimelineSummary. El TimelineSummary puede realizar dos tareas que facilitan la revisión de los resultados:

1. Escribir un documento json en el disco que resuma los datos contenidos dentro del Timeline. Este resumen incluye información sobre el número de fotogramas perdidos (skipped frames), los tiempos de construcción más lentos y más.
2. Guardar el Timeline completo como un archivo json en el disco. Este archivo se puede abrir con las herramientas de seguimiento (tracing) del navegador Chrome que se encuentran en chrome://tracing.

Para capturar los resultados, crea un archivo llamado perf_driver.dart en la carpeta test_driver y añade el siguiente código:

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,
        );
      }
    },
  );
}

La función integrationDriver tiene un responseDataCallback que puedes personalizar. Por defecto, escribe los resultados en el archivo integration_response_data.json , pero puedes personalizarla para generar un resumen como en este ejemplo.

Después de configurar la prueba para capturar un Timeline de rendimiento y guardar un resumen de los resultados en el disco, ejecuta la prueba con el siguiente comando:

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

La opción --profile significa compilar la aplicación para el "modo de perfil" en lugar del "modo de depuración", para que el resultado de la prueba de rendimiento (benchmark) sea más cercano a lo que experimentarán los usuarios finales.

Una vez que la prueba se completa con éxito, el directorio build en la raíz del proyecto contiene dos archivos:

1. scrolling_summary.timeline_summary.json contiene el resumen. Abre el archivo con cualquier editor de texto para revisar la información contenida en él. Con una configuración más avanzada, podrías guardar un resumen cada vez que se ejecute la prueba y crear un gráfico con los resultados.
2. scrolling_timeline.timeline.json contiene los datos completos de la línea de tiempo. Abre el archivo utilizando las herramientas de seguimiento (tracing) del navegador Chrome que se encuentran en chrome://tracing. Las herramientas de seguimiento proporcionan una interfaz conveniente para inspeccionar los datos de la línea de tiempo y descubrir la fuente de un problema de rendimiento.

{
  "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

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

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,
        );
      }
    },
  );
}