Contexto rápido.

No Mockly cada app tem vários flows, e cada flow tem várias screens.

Quando eu comecei a montar a página de exploração, fiz o que parecia mais simples:

buscar tudo e renderizar tudo.

Tipo assim:

• usuário abre um app
• o sistema busca todos os flows
• cada flow tem várias imagens
• tudo renderizado na página de uma vez

Em alguns apps isso virava facilmente:

2000+ imagens no DOM.

Resultado:

• scroll travando
• browser sofrendo
• memória subindo
• experiência horrível

---

Primeira solução: batch loading

A primeira otimização foi parar de carregar tudo de uma vez.

Em vez disso:

• carregar os primeiros flows
• depois buscar mais em lotes pequenos

Exemplo da lógica:
- carrega 8 flows
- depois +8
- depois +8

Isso já ajudou bastante porque:

• menos imagens na tela
• menos trabalho para o browser
• carregamento progressivo

Mas ainda não era o ideal.

---

Segunda solução: virtualização de flows

O próximo passo foi perceber algo óbvio:

o usuário só vê uma pequena parte da tela.

Então não fazia sentido renderizar todos os flows.

A solução foi usar virtualização:

• só renderizar os flows visíveis na viewport
• manter alguns extras (overscan) para o scroll ficar suave
• o resto vira apenas espaço vazio calculado

Na prática a página passou a renderizar algo como:
-14 flows visíveis
- alguns extras

Em vez de centenas.

---

Resultado

Depois dessas mudanças:

• DOM muito menor
• scroll suave
• menos uso de memória
• carregamento mais rápido

E principalmente:

parei de tentar renderizar milhares de imagens ao mesmo tempo.

---

Moral da história

Se seu projeto tem:

• feeds
• galerias
• bibliotecas de assets
• ou qualquer coisa com muitas imagens

Evite isso:

renderizar tudo de uma vez.

Quase sempre a solução é uma combinação de:

• batch loading
• lazy loading
• virtualização