Serie de optimización del rendimiento de iOS 03 ｜ Problemas comunes con la tartamudez de la lista de iOS

El retraso en la lista es el problema de rendimiento más común y que más fácilmente se juzga mal en proyectos de iOS.

Tan pronto como vea esta situación y la lista no vaya bien, diré de inmediato:

• ¿SwiftUI List es demasiado lento?
• ¿Está configurado incorrectamente UICollectionView?
• ¿Este control está inherentemente estancado?

A veces estos juicios no son del todo erróneos, pero suelen ser superficiales. La pregunta real y más central suele ser:

En el desplazamiento, una acción que depende en gran medida de la respuesta oportuna del hilo principal, ¿cuánto trabajo adicional realiza el sistema al mismo tiempo?

Por lo tanto, aunque UITableView, UICollectionView y SwiftUI List se implementan de diferentes maneras, a menudo caen en problemas muy similares.

1. Es más probable que las listas expongan problemas de rendimiento que muchas páginas.

Porque la lista es una escena continua de alta frecuencia que es sensible a cada fotograma.

A medida que el usuario se desplaza, el sistema debe completar continuamente estas cosas:

• Calcular el diseño
• Preparar unidades visibles.
• Unidades de reutilización y reciclaje.
• dibujar contenido
• Responder a los gestos.

Si también se le pide al hilo principal que asuma mucho trabajo adicional al mismo tiempo, como por ejemplo:

• Decodificación de imágenes
• Montaje de texto enriquecido
• Análisis JSON
• Cálculos de diseño automático de alto costo
• Los cambios de estado frecuentes conducen a una actualización completa

Ese retraso es casi un resultado inevitable.

La razón por la que la lista es tan popular es que parece misteriosa en la superficie, pero en realidad está más cerca de ella, lo que amplifica muy obviamente la presión sobre el hilo principal.

2. El problema más común es que haces algo que no deberías hacer en este momento mientras te desplazas.

Un enfoque común al optimizar es centrarse únicamente en la longitud del código de celda al optimizar listas. Pero en proyectos reales, los motivos de las tarjetas de lista suelen ser más parecidos a los siguientes:

• La imagen no se decodifica hasta que se muestra
• La altura del texto se calcula repetidamente durante el desplazamiento.
• La celda se formatea y los datos se convierten cada vez que aparecen.
• Se activan demasiadas actualizaciones de estado de la capa principal al desplazarse por la lista.
• Un pequeño cambio hace que se vuelva a dibujar la lista completa o que la diferencia sea demasiado costosa

Las características comunes de estos problemas son: Están destinados a “no deben realizarse en este momento de desplazamiento”.

Entonces, la idea más importante para la optimización de listas es:

• ¿Qué tareas se pueden realizar con antelación?
• Qué trabajos se pueden almacenar en caché
• ¿Qué tareas se pueden posponer?
• Qué actualizaciones se pueden localizar

3. Las imágenes suelen ser las culpables de los retrasos en las listas. A primera vista, parecen descargas, pero en realidad están más cerca de la decodificación y el procesamiento de tamaño.

Muchos equipos dicen “demasiadas imágenes” cuando se encuentran con tarjetas de lista. A veces la dirección de esta frase es correcta, pero la razón suele ser errónea.

Lo que realmente ralentiza el desplazamiento suele ser:

• Decodificación de imágenes
• Ampliación de imagen
• Carga de tamaño inadecuado
• Activar con frecuencia el procesamiento de imágenes en el hilo principal.

Dicho esto, lo más aterrador del problema de los gráficos es que fácilmente puede insertar trabajo costoso en la ruta crítica de un rollo.

Por lo tanto, el núcleo de la optimización de imágenes en la lista generalmente no es solo el almacenamiento en caché, sino también:

• Prepare el tamaño adecuado con antelación
• Reducir la presión de decodificación en el momento de la visualización.
• Evite el procesamiento pesado de imágenes al desplazarse

4. El procesamiento de datos a menudo perjudica silenciosamente la experiencia de desplazamiento.

Esto es más común de lo que uno podría pensar.

Por ejemplo, es necesario mostrar un elemento de la lista:

• Formato de hora
• Formato de cantidad
• Combinación de texto enriquecido
• Mapeo de etiquetas
• Redacción de estados complejos

Si estas cosas se hacen temporalmente durante la fase de configuración de la celda, el hilo principal continuará asumiendo este costo durante el desplazamiento.

La parte más problemática de este tipo de problema es:

• Funcionalmente completamente correcto
• El coste único no parece exagerado
• Pero en el desplazamiento de alta frecuencia, se ampliará exponencialmente.

Por lo tanto, un principio muy importante para la optimización del rendimiento de la lista es: **Deje que la capa de visualización intente consumir los datos de visualización preparados en lugar de realizar muchas conversiones mientras se desplaza. **

5. Si el método de actualización de estado es incorrecto, la lista se atascará y, a menudo, se confunde con un problema de diseño.

Algunos problemas de lista no se complican en absoluto por la celda, sino también porque la granularidad de actualización del estado es demasiado tosca.

Por ejemplo:

• Actualizar la lista completa tan pronto como cambie la palabra clave de búsqueda
• Me gusta un elemento y se reconstruye todo el árbol de estado de la página.
• Aparece un resultado paginado y se vuelve a calcular la lista completa.

Este tipo de problema se diagnostica erróneamente fácilmente como:

• Los componentes de la interfaz de usuario son demasiado lentos.
• El sistema de diseño no es eficiente.

De hecho, el verdadero problema suele ser:

**Un cambio en una pequeña empresa provocó una actualización de la interfaz de usuario que fue mucho mayor de lo necesario. **

Entonces, cuando la lista de solución de problemas se retrasa, una cosa que pregunto a menudo es:

¿Qué elementos deberían verse afectados por este cambio de estado? ¿Por qué al final afectó a un área tan grande?

6. ¿Cuáles son los problemas comunes de UITableView, UICollectionView y SwiftUI List?

Aunque los detalles de implementación de estos tres sistemas son muy diferentes, los problemas de rendimiento de alta frecuencia son en realidad muy similares:

• hacer demasiado trabajo en el hilo principal durante el desplazamiento
• El elemento de la lista muestra que los datos se prepararon demasiado tarde.
• El procesamiento de imágenes y textos se coloca en el camino crítico.
• La granularidad de actualización es demasiado grande.
• Ciertos diseños o jerarquías de vistas son demasiado complejos

En otras palabras, sus problemas comunes no son:

**La forma interactiva de la lista en sí es particularmente sensible al tiempo del hilo principal y la asignación de trabajo. **

Por lo tanto, el mismo diseño incorrecto puede provocar bloqueos similares en tres controles de lista diferentes.

7. Una secuencia de resolución de problemas más cercana al combate real.

Si quiero verificar el problema del retraso de la lista hoy, generalmente no cambiaré el código primero, sino que primero juzgaré en este orden:

1. La tartamudez ocurre cuando aparece la primera pantalla, cuando se desplaza rápidamente o cuando se produce la paginación.
2. Si el elemento de la lista actual tiene imágenes, texto enriquecido o diseño complejo.
3. Si se realizan muchas conversiones en tiempo real antes de que se muestre la celda.
4. Si un determinado cambio de estado local provocó una actualización a gran escala.
5. Si hay decodificación, escalado o recálculo sincronizados durante el desplazamiento.

El valor de esta secuencia es: Primero descubra “qué trabajo ocupa el hilo principal con el desplazamiento” en lugar de adivinar primero el problema del marco.

8. Conclusión: La esencia del retraso de la lista suele ser que se acumula demasiado trabajo en la ruta crítica que no debería ocuparse.

Para decirlo en forma más breve, diría:

La lista está atascada y el núcleo suele desplazarse. En este escenario de alta frecuencia, el hilo principal conlleva demasiados costos de diseño, decodificación, conversión y actualización excesivos al mismo tiempo.

Entonces, las cosas más importantes para la optimización de la lista son:

• Poner el trabajo por adelantado.
• Almacenar en caché los resultados
• Reducir la granularidad de actualización
• Quitar la carga adicional del camino crítico

Si haces bien estas cuatro cosas, la experiencia de la lista normalmente será más estable que simplemente ajustar algunos parámetros.