JSON grande en frontend: renderizado eficiente para 100MB de datos
2024-06-18
Apps de logs y analitica pueden recibir decenas o cientos de MB en JSON. Un parseo sincrono mas render completo del DOM suele congelar la pestana.
Donde se va el tiempo
JSON.parse es sincrono y consume CPU; ademas, el grafo en memoria ocupa mucho heap.
Renderizar millones de nodos puede costar mas que parsear: virtualiza la interfaz.
Parsear en Web Worker
Envia texto o buffers al Worker para parsear fuera del hilo principal.
Procura devolver solo la pagina actual en vez de reenviar todo el grafo.
Listas virtuales
Si es un arreglo grande, renderiza solo filas visibles con bibliotecas de virtualizacion.
En estructuras en arbol, carga hijos bajo demanda al expandir.
Streaming y fragmentos
JSON Lines se presta al flujo incremental; arrays gigantes suelen requerir paginacion o NDJSON.
Con fetch + ReadableStream puedes procesar por partes sin esperar el cuerpo completo.
Consejo realista para 100MB
Prioriza filtrar, paginar y comprimir en servidor.
Si todo debe ser cliente: Worker + virtualizacion + progreso visible y monitoreo de memoria.