JSON grande no frontend: renderizacao eficiente para 100MB de dados
2024-06-18
Apps de logs e analise podem receber dezenas ou centenas de MB em JSON. Parse sincrono com renderizacao total do DOM costuma congelar a aba.
Onde o tempo vai
JSON.parse e sincrono e pesado em CPU; o grafo em memoria tambem cresce muito.
Renderizar milhoes de nos pode custar mais que parsear: virtualize a interface.
Parse no Web Worker
Envie texto ou buffers para o Worker e parse fora da thread principal.
Sempre que possivel, retorne apenas o recorte da pagina atual, nao o grafo inteiro.
Listas virtuais
Para arrays grandes, renderize somente as linhas visiveis com virtualizacao.
Em arvores, carregue filhos sob demanda ao expandir.
Streaming e chunks
JSON Lines encaixa bem em fluxo incremental; arrays gigantes pedem paginacao ou NDJSON.
Com fetch + ReadableStream, voce processa por partes sem esperar o corpo inteiro.
Conselho realista para 100MB
Priorize filtro, paginacao e compressao no servidor.
Se for client-only: Worker + virtualizacao + progresso visivel e monitoramento de memoria.