Large JSON Parsing: Performantes Frontend-Rendering fuer 100MB Daten
2024-06-18
Log- und Data-Apps landen schnell bei riesigen JSON-Dateien. Ein einmaliger Parse plus Komplett-Render blockiert den Tab - die Loesung ist inkrementelles Arbeiten.
Wo die Zeit hingeht
JSON.parse ist synchron und CPU-intensiv; danach steigt der Heap stark an.
Das Rendern von Millionen Knoten kostet oft mehr als das Parsen - UI virtualisieren.
Parsing im Web Worker
Text oder Buffer an Worker senden, dort parsen und nur aktuelle Seitenslices zurueckgeben.
Wenn moeglich nicht den gesamten Objektgraphen zum Main Thread zurueckschicken.
Virtuelle Listen
Bei Arrays nur sichtbare Zeilen rendern (z. B. react-window).
Bei Baumdaten Kinder erst beim Aufklappen laden.
Streaming und Chunks
JSON Lines streamt gut; riesige Einzelarrays besser ueber Paging oder NDJSON bereitstellen.
fetch plus ReadableStream erlaubt schrittweise Verarbeitung.
Praxis fuer 100MB
Serverseitig filtern, paginieren und gzippen ist meist am effektivsten.
Client-only: Worker plus Virtualisierung plus Fortschrittsanzeige, Speicher in DevTools beobachten.