Serie de optimización del rendimiento de iOS 04 ｜ Problemas de rendimiento de alta frecuencia en la carga y el almacenamiento en caché de imágenes

Las imágenes son casi el lugar más probable para que se produzcan problemas de rendimiento recurrentes en proyectos de iOS.

A menudo lo encuentras en varios escenarios:

• La página de inicio se congela
• Lista de cuadros desplegables con desplazamiento.
• Aumento de la memoria
• La primera pantalla se carga lentamente.
• Las imágenes parpadean mientras se desplaza
• Para la misma página de contenido, si hay más imágenes, la velocidad obviamente será más lenta.

Al abordar inicialmente este tipo de problema, el problema de la imagen se simplificará en una oración:

Luego agregue caché.

El almacenamiento en caché es, por supuesto, importante, pero si la optimización de imágenes solo se entiende como “si hay caché”, generalmente está lejos del problema real. Porque la verdadera complejidad del enlace de imagen es que acumula muchos costos:

• Descargar
• Decodificar
• Ampliar
• Representación
• retención de memoria
• Gestión del ciclo de vida.

Por tanto, un problema de imagen casi siempre es un problema del sistema.

1. Es más probable que las imágenes amplifiquen los problemas que los datos ordinarios.

Porque las imágenes tienen inherentemente varias características que hacen que el rendimiento sea frágil:

• El tamaño del recurso suele ser mayor.
• A menudo se requiere decodificación antes de mostrar
• Dispositivos y escenas de diferentes tamaños activarán el escalado.
• Aparecerá frecuentemente en la lista.
• Se almacena en caché fácilmente y ocupa memoria durante mucho tiempo.

En otras palabras, las imágenes son un tipo de recurso que ejerce presión sobre la CPU, la memoria, el ancho de banda y el renderizado al mismo tiempo.

Esto también muestra que una vez que la imagen no se procesa bien, a menudo no aparece como un solo problema, sino que aparecen varios problemas juntos:

• tarjetas rodantes
• mucha memoria
• Primera pantalla lenta

2. La descarga no es el único costo. Lo que muchos equipos realmente subestiman es el tiempo de decodificación.

Cuando surge este tema, la carga de imágenes es todo el foco: descargar:

-¿El cuadro es grande o no?

• ¿La red es lenta?
• caché no llegó

Pero en proyectos reales, la descarga no suele ser el único costo y, a menudo, ni siquiera es el costo principal del desplazamiento. Lo que realmente tiende a ralentizar la experiencia en momentos críticos suele ser:

• Decodificación de imágenes
• Procesamiento de tamaño previo a la visualización
• Preparación de imágenes que ocurre en el hilo principal mientras se desplaza

En otras palabras, “descarga finalizada” de una imagen no significa “lista para mostrar”. Si se dedica mucho trabajo de procesamiento de imágenes al momento de visualización, la página eliminará fácilmente fotogramas en el momento más sensible.

3. Cuantos más cachés, mejor. La propia estrategia de caché puede crear nuevos problemas.

El almacenamiento en caché es necesario, pero nunca es gratuito.

Si la estrategia de almacenamiento en caché no está clara, las consecuencias comunes incluyen:

• El caché obviamente está afectado, pero la memoria es cada vez mayor.
• El almacenamiento en caché del disco es demasiado agresivo y la estrategia de limpieza no es razonable.
• La misma imagen se almacena en caché repetidamente en varios tamaños
• El acierto de caché se ve bien cuando se cambia de lista rápidamente, pero la página aún está bloqueada

Esto muestra que lo que el almacenamiento en caché realmente quiere resolver no es solo “menos la próxima vez”, sino que también incluye:

• ¿Qué tamaño almacenar en caché?
• ¿Cuánto tiempo conservar?
• Cuando eliminar
• Qué recursos son adecuados para el almacenamiento en caché de memoria y cuáles sólo son adecuados para el almacenamiento en caché de disco

Por lo tanto, el almacenamiento en caché de imágenes nunca se puede explicar claramente simplemente “agregando caché”. Es esencialmente un conjunto de estrategias del ciclo de vida de los recursos.

4. Es muy probable que las imágenes de la lista se conviertan en una fuente de retraso.

Porque el escenario de la lista naturalmente cumple con varias condiciones de alto riesgo:

• Gran cantidad de imágenes en la misma pantalla.
• Alta frecuencia de desplazamiento
• La reutilización y el reciclaje ocurren con frecuencia.
• Los usuarios son muy sensibles a la caída de fotogramas.

Si también haces estas cosas al mismo tiempo en este escenario:

• Decodificación de imágenes
• Cálculo de tamaño
• Recorte de esquinas redondeadas
• Superposición de texto enriquecido

Entonces, el hilo principal puede verse abrumado fácilmente durante el desplazamiento.

Por lo tanto, el aspecto más crítico de la optimización de imágenes de lista es:

¿Este trabajo ocurre en la ruta crítica rodante?

Si ocurre en el camino crítico, no importa cuán pequeño sea el costo adicional, se verá amplificado por la rodadura de alta frecuencia.

5. Un malentendido muy común: todos los problemas de imagen se atribuyen a problemas de red

En proyectos reales, la gente suele decir:

• Hay muchas imágenes, por lo que es lento.
• La imagen es lenta, entonces es un problema de red.

Esta línea de razonamiento suele ser incompleta.

Porque todavía existen muchos problemas de imagen incluso en condiciones de red fuertes y aciertos de caché. Las razones son:

• La imagen ha sido obtenida, pero no ha sido decodificada previamente.
• El tamaño de la imagen es inadecuado y se ha realizado un procesamiento adicional antes de mostrarla.
• El estado cambia demasiado cuando se desplaza la lista, lo que provoca una gran cantidad de redibujos.

Entonces, en la pregunta sobre la imagen, la “adquisición de recursos” es solo una parte del vínculo. La verdadera dificultad es si cada paso del vínculo ocurre en el momento adecuado.

6. Al optimizar enlaces de imágenes, algunas de las preguntas que hago con más frecuencia

Si hoy tuviera que solucionar una pregunta sobre el rendimiento relacionada con la imagen, normalmente comenzaría preguntando:

1. El problema es que la primera pantalla es lenta, la lista está atascada o la memoria es alta.
2. ¿La imagen empieza a tener un alto costo de procesamiento en el momento de su visualización?
3. ¿La imagen actualmente cargada tiene el tamaño apropiado y no es una reducción drástica de la imagen original?
4. ¿Qué afecta al caché? ¿La imagen original, la imagen procesada o el tamaño de la clave no se alcanzan en absoluto?
5. ¿El enlace de la imagen supone demasiado trabajo para el hilo principal?

Estas preguntas son más valiosas que “probar con otra biblioteca” porque se aproximan directamente al costo real.

7. Conclusión: Los problemas de imagen ocurren con frecuencia. Superficialmente, parece que la imagen es especial, pero en realidad se acerca más a ella y, naturalmente, abarca múltiples dimensiones de recursos.

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

La razón por la que la carga y el almacenamiento en caché de imágenes son siempre un área con alta incidencia de problemas de rendimiento es que en la superficie parece que “las imágenes son difíciles”, pero en realidad está más cerca del hecho de que también involucra ancho de banda, CPU, memoria, tiempo de renderizado y administración del ciclo de vida. Una vez que un vínculo está diseñado de manera irrazonable, el problema se amplificará rápidamente.

Entonces, lo que realmente necesita la optimización de imágenes no es solo el caché, sino también:

• Descargar
• Decodificar
• Ampliar
• caché
• Mostrar tiempo

Tome todo este enlace juntos.