Es innegable que Flutter es un marco de desarrollo de aplicaciones móviles muy poderoso. Elegimos Flutter cuando seleccionamos la arquitectura técnica, especialmente la capacidad entre terminales es realmente excelente, pero gradualmente descubrimos que en la implementación de aplicaciones complejas, el rendimiento de la La aplicación se verá afectada y sufrirá alguna influencia.
De hecho, también hemos descubierto este problema internamente, pero por consideraciones prioritarias, la necesidad de optimizar el rendimiento no se ha incluido en la iteración, pero las operaciones del producto han recibido comentarios de los usuarios uno tras otro sobre la experiencia del usuario, por lo que hemos puesto esto necesidad en el futuro La premisa es que después de la revisión de los requisitos y la discusión técnica, hay algunas conclusiones del camino de realización, y también aprovecho la oportunidad para compartir y comunicar aquí.
Proceso de renderizado de Flutter
Antes de optimizar el rendimiento de una aplicación Flutter, es necesario comprender su proceso de renderizado, que es crucial para la optimización del rendimiento.
El proceso de renderizado de Flutter se divide principalmente en tres etapas: construcción, maquetación y dibujo.
- Durante la fase de construcción, Flutter crea y configura widgets;
- En la fase de diseño, Flutter determinará la posición y el tamaño de cada widget;
- Durante la fase de dibujo, Flutter dibujará el widget en la pantalla.
1. Limite la cantidad de widgets utilizados
En Flutter, crear demasiados widgets consumirá una gran cantidad de recursos de la CPU, lo que afectará el rendimiento de la aplicación. Por lo tanto, debemos minimizar la cantidad de widgets que construimos. Por ejemplo, en lugar de usar ListView, podemos usar ListView.builder para construir la lista. Porque ListView.builder solo creará widgets que estén visibles en la pantalla, mientras que ListView creará todos los widgets.
2. Evite redibujar innecesariamente
En Flutter, si el estado de un widget cambia, el widget y todos sus widgets secundarios se volverán a dibujar. Por lo tanto, debemos tratar de evitar redibujar innecesariamente. Por ejemplo, podemos usar const para crear un widget constante para que el widget no se vuelva a dibujar. Además, también podemos usar RepaintBoundary para aislar los widgets que deben volver a dibujarse, de modo que se pueda reducir el redibujado innecesario.
Estructura de procesamiento de datos de Flutter
Cuando se trabaja con grandes cantidades de datos, es muy importante utilizar las estructuras de datos y los algoritmos correctos.
1. Usa hábilmente la lista enlazada (LinkedList)
Si necesitamos encontrar un elemento en una lista, usar un conjunto hash (HashSet) será más eficiente que usar una lista (List). Porque la complejidad temporal de encontrar un elemento en un conjunto hash es O(1), mientras que la complejidad temporal de encontrar un elemento en una lista es O(n). De manera similar, si necesitamos agregar o eliminar elementos en la lista con frecuencia, usar una lista vinculada (LinkedList) será más eficiente que usar una matriz (Array).
2. Usa la carga diferida
Cuando se trata de grandes cantidades de datos, podemos utilizar la carga diferida para mejorar el rendimiento de la aplicación. Lazy loading es una técnica de carga de datos solo cuando es necesario. Por ejemplo, podemos usar FutureBuilder o StreamBuilder para implementar la carga diferida, de modo que podamos evitar cargar todos los datos a la vez, reduciendo así el uso de memoria.
Utilizar herramientas de análisis de rendimiento
Flutter en realidad proporciona algunas herramientas de análisis de rendimiento, como Flutter DevTools y DartDevTools.
Si hacemos un buen uso de estas herramientas, pueden ayudarnos a encontrar cuellos de botella en el rendimiento y realizar optimizaciones específicas.
Por ejemplo, podemos usar la vista de línea de tiempo de Flutter DevTools para ver la velocidad de fotogramas de la aplicación y el tiempo de construcción, diseño y dibujo de cada fotograma. También podemos usar el CPU Profiler de Dart DevTools para ver el uso de la CPU y el tiempo de ejecución de cada función.
Además, también descubrimos durante las discusiones técnicas que también se pueden implementar el almacenamiento en caché de imágenes, la serialización JSON, la deserialización y las herramientas de extensión.
En Flutter, puede usar el almacenamiento en caché para mejorar el rendimiento de su aplicación. Por ejemplo, podemos usar el caché de imágenes (ImageCache) para almacenar imágenes en caché, de modo que podamos evitar descargar imágenes de la red cada vez. Además, también podemos utilizar la tecnología Memoization para almacenar en caché los resultados de las funciones, a fin de evitar cálculos repetidos.
Algunas operaciones, como la serialización y deserialización de JSON, pueden afectar el rendimiento de la aplicación si se realizan directamente con las bibliotecas centrales de Dart. Por lo tanto, podemos usar bibliotecas especializadas como json_serializable y build_value para realizar estas operaciones.
Si consideramos la optimización desde la perspectiva de H5, también recomiendo encarecidamente usar applets en lugar de H5, para que los applets desarrollados en el pasado puedan ejecutarse directamente en las aplicaciones desarrolladas por Flutter. El mismo negocio funcional solo necesita un desarrollo de applet. también se ejecuta en otras aplicaciones en el lado de WeChat.Debido a la tecnología de doble hilo, el efecto es significativamente mejor que el de H5, y la situación de pantalla blanca y congelación se reduce considerablemente. En realidad, el principio es muy simple: FinClip proporciona un SDK de programa pequeño para integrar con las aplicaciones de Flutter, de modo que la aplicación tenga un entorno de host que pueda ejecutar códigos comerciales de programas pequeños.
En general, la optimización del rendimiento de Flutter es un proceso continuo, que requiere que aprendamos y practiquemos continuamente. El objetivo de la optimización no es solo mejorar la velocidad de ejecución de la aplicación, sino también mejorar la velocidad de respuesta de la aplicación, reducir el uso de memoria de la aplicación y mejorar la eficiencia energética de la aplicación. Con suerte, nuestra exploración en profundidad de estos consejos prácticos y mejores prácticas ayudará a mejorar el rendimiento de sus aplicaciones cuando las construya con Flutter.