iOS Performance Optimization Series 04｜Problemas de desempenho de alta frequência no carregamento e cache de imagens

As imagens são quase o local mais provável para problemas recorrentes de desempenho em projetos iOS.

Você costuma encontrá-lo em vários cenários:

• A página inicial congela
• A rolagem da lista elimina quadros
• Surto de memória
• A primeira tela carrega lentamente
• As imagens piscam durante a rolagem
• Para a mesma página de conteúdo, se houver mais fotos, a velocidade obviamente será mais lenta.

Ao lidar inicialmente com este tipo de problema, o problema da imagem será simplificado em uma frase:

Em seguida, adicione cache.

O cache é obviamente importante, mas se você entender a otimização de imagem apenas como “se há cache”, geralmente está longe de ser o problema real. Porque a verdadeira complexidade do link da imagem é que ele agrega muitos custos:

• Baixar
• Decodificar
• Zoom
• Renderização
• retenção de memória
• Gestão do ciclo de vida

Portanto, um problema de imagem é quase sempre um problema de sistema.

1. As imagens têm maior probabilidade de amplificar os problemas do que os dados comuns.

Porque as imagens possuem inerentemente várias características que tornam o desempenho frágil:

• O tamanho do recurso geralmente é maior
• Muitas vezes a decodificação é necessária antes da exibição
• Dispositivos e cenas de tamanhos diferentes acionarão o dimensionamento
• Aparecerá frequentemente na lista
• Facilmente armazenado em cache e ocupando memória por muito tempo

Em outras palavras, as imagens são um tipo de recurso que pressiona a CPU, a memória, a largura de banda e a renderização ao mesmo tempo.

Isso também mostra que, uma vez que a imagem não é bem processada, muitas vezes ela não aparece como apenas um problema, mas vários problemas aparecem juntos:

• Cartões rolantes
• alta memória
• Primeira tela lenta

2. O download não é o único custo. O que muitas equipes realmente subestimam é o tempo de decodificação.

Quando esse assunto surge, o carregamento de imagens é todo o foco: download:

-A imagem é grande ou não?

• A rede está lenta?
• cache atingiu não

Mas em projetos reais, o download muitas vezes não é o único custo, e muitas vezes nem é o custo principal da rolagem. O que realmente tende a desacelerar a experiência em momentos críticos é muitas vezes:

• Decodificação de imagem
• Processamento de tamanho pré-exibição
• Preparação da imagem que acontece no thread principal durante a rolagem

Em outras palavras, “download concluído” de uma imagem não significa “pronta para exibição”. Se muito trabalho de processamento de imagem for aplicado no momento de exibição, a página perderá facilmente os quadros no momento mais sensível.

3. Quanto mais caches, melhor. A própria estratégia de cache pode criar novos problemas.

O armazenamento em cache é necessário, mas o armazenamento em cache nunca é gratuito.

Se a estratégia de cache não for clara, as consequências comuns incluem:

• O cache está obviamente atingido, mas a memória está cada vez maior.
• O cache de disco é muito agressivo e a estratégia de limpeza não é razoável
• A mesma imagem é armazenada em cache repetidamente em vários tamanhos
• O acerto no cache parece bom ao alternar listas rapidamente, mas a página ainda está travada

Isso mostra que o que o cache realmente quer resolver não é apenas “menos da próxima vez”, mas também inclui:

• Qual tamanho armazenar em cache
• Quanto tempo manter
• Quando eliminar
• Quais recursos são adequados para cache de memória e quais são adequados apenas para cache de disco

Portanto, o cache de imagens nunca pode ser explicado claramente apenas “adicionando cache”. É essencialmente um conjunto de estratégias de ciclo de vida de recursos.

4. As imagens da lista têm maior probabilidade de se tornarem uma fonte de atraso.

Porque o cenário da lista atende naturalmente a várias condições de alto risco:

• Grande número de fotos na mesma tela
• Alta frequência de rolagem
• A reutilização e a reciclagem ocorrem com frequência
• Os usuários são muito sensíveis à queda de quadros

Se você também fizer essas coisas ao mesmo tempo neste cenário:

• Decodificação de imagem
• Cálculo de tamanho
• Corte de cantos arredondados
• Sobreposição de rich text

Então, o thread principal pode ser facilmente sobrecarregado durante a rolagem.

Portanto, o aspecto mais crítico da otimização da imagem da lista é:

Esse trabalho ocorre no caminho crítico contínuo?

Se ocorrer no caminho crítico, não importa quão pequeno seja o custo adicional, ele será ampliado pela laminação de alta frequência.

5. Um mal-entendido muito comum: todos os problemas de imagem são atribuídos a problemas de rede

Em projetos reais, as pessoas costumam dizer:

• Há muitas fotos, então é lento
• A imagem está lenta, então é um problema de rede

Esta linha de raciocínio é muitas vezes incompleta.

Porque muitos problemas de imagem ainda existem mesmo sob fortes condições de rede e ocorrências de cache. Os motivos são:

• A imagem foi obtida, mas não foi decodificada antecipadamente
• O tamanho da imagem é inadequado e foi realizado processamento adicional antes da exibição.
• O estado muda muito quando a lista é rolada, causando um grande número de redesenhos

Portanto, na questão ilustrada, “aquisição de recursos” é apenas parte do link. A verdadeira dificuldade é saber se cada etapa do link acontece no momento certo.

6. Ao otimizar links de imagens, algumas das perguntas que faço com mais frequência

Se eu fosse solucionar uma questão de desempenho relacionada à imagem hoje, normalmente começaria perguntando:

1. O problema é que a primeira tela está lenta, a lista está travada ou a memória está alta.
2. A imagem passa a ter alto custo de processamento no momento em que é exibida?
3. A imagem atualmente carregada tem o tamanho apropriado e não é uma redução brusca da imagem original?
4. O que chega ao cache? A imagem original, a imagem processada ou o tamanho da chave não foram atingidos?
5. O link da imagem dá muito trabalho ao tópico principal?

Estas questões são mais valiosas do que “experimente outra biblioteca” porque aproximam diretamente o custo real.

7. Conclusão: Problemas de imagem ocorrem com frequência. Superficialmente, parece que a imagem é especial, mas na verdade está mais próxima dela e abrange naturalmente múltiplas dimensões de recursos.

Para resumir, eu diria:

A razão pela qual o carregamento e cache de imagens é sempre uma área com alta incidência de problemas de desempenho é que superficialmente parece que “imagens são difíceis”, mas na verdade está mais próximo do fato de que também envolve largura de banda, CPU, memória, tempo de renderização e gerenciamento do ciclo de vida. Uma vez que qualquer link seja projetado de forma irracional, o problema será rapidamente amplificado.

Então, o que a otimização de imagem realmente precisa fazer não é apenas armazenar em cache, mas também:

• Baixar
• Decodificar
• Zoom
• cache
• Mostrar tempo

Junte todo esse link.