CodeKitHub
Πώς να δεις ένα τεράστιο αρχείο JSON χωρίς να κολλήσει ο browser σου

Πώς να δεις ένα τεράστιο αρχείο JSON χωρίς να κολλήσει ο browser σου

Δημοσιεύτηκε 23 Ιουλ 2026

Επικολλώντας ένα API dump 50MB ή μια πλήρη εξαγωγή βάσης δεδομένων σε οποιοδήποτε εργαλείο JSON που τρέχει στον browser — συμπεριλαμβανομένου αυτού εδώ — η καρτέλα θα επιβραδυνθεί ή θα παγώσει εντελώς. Αυτό δεν είναι bug κάποιου συγκεκριμένου εργαλείου, είναι ιδιότητα του τρόπου με τον οποίο οι browsers αποδίδουν κείμενο και DOM. Δείτε τι πραγματικά συμβαίνει και πώς να το παρακάμψετε.

Γιατί τα μεγάλα αρχεία JSON παγώνουν τον browser, όχι απλώς “φορτώνουν αργά”

Δύο ξεχωριστά κόστη προστίθενται:

  1. Κόστος parsing. Το JSON.parse σε ένα σωστά διαμορφωμένο string 50MB παίρνει περίπου μισό δευτερόλεπτο έως λίγα δευτερόλεπτα σε ένα κανονικό laptop — αισθητό, αλλά όχι το πραγματικό πρόβλημα.
  2. Κόστος rendering. Αυτό είναι που πραγματικά παγώνει την καρτέλα. Αν ένα εργαλείο αποδίδει το μορφοποιημένο αποτέλεσμα ως ένα τεράστιο block κειμένου (ή χειρότερα, ως συμπτυσσόμενο δέντρο με ένα DOM node ανά κλειδί), ο browser πρέπει να κάνει layout και paint ενδεχομένως εκατομμύρια DOM nodes. Αυτό είναι που κάνει την καρτέλα να μην ανταποκρίνεται, όχι το parsing.

Άρα το όριο μεγέθους που συναντάς σχεδόν ποτέ δεν προέρχεται από το πρότυπο JSON ή τον parser — προέρχεται από το να ζητάς από έναν browser να ζωγραφίσει τεράστια ποσότητα κειμένου ή ένθετου UI ταυτόχρονα.

Η πραγματική διαδικασία για γνήσια μεγάλα αρχεία

Μην ανοίγεις ολόκληρο το αρχείο πουθενά μέσα σε browser. Αντ’ αυτού:

  1. Εξήγαγε πρώτα μόνο το κομμάτι που χρειάζεσαι. Αν κάνεις debug σε μία χαλασμένη εγγραφή μέσα σε ένα dump 200MB, δεν χρειάζεσαι τα υπόλοιπα 199MB μπροστά σου. Τα εργαλεία γραμμής εντολών το χειρίζονται αυτό χωρίς ποτέ να φορτώνουν ολόκληρο το αρχείο στη μνήμη όπως κάνει μια καρτέλα browser:
    # pull out one top-level key from a huge file, streaming
    jq '.results[42]' huge-file.json > fragment.json
    
    # or just grep for context around a known string first
    grep -n '"user_id": 88214' huge-file.json
  2. Μορφοποίησε μόνο εκείνο το απόσπασμα στον browser. Μερικά KB εξαγμένου JSON μορφοποιούνται ακαριαία και είναι πραγματικά αναγνώσιμα — αυτή είναι μια συνήθεια “μορφοποίησε μόνο το κομμάτι που σε ενδιαφέρει” που αξίζει να χτίσεις για κάθε μεγάλο log ή dump, όχι μόνο για αυτό το συγκεκριμένο σφάλμα.
  3. Αν χρειάζεται να επιθεωρήσεις τη δομή, όχι τις τιμές, τρέξε πρώτα τοπικά jq 'keys' ή jq '. | length' για να καταλάβεις το σχήμα πριν αποφασίσεις τι θα εξάγεις. Δεν χρειάζεται να δεις 50.000 εγγραφές ενός πίνακα για να ξέρεις ότι ο πίνακας έχει 50.000 εγγραφές.

Πότε ένα εργαλείο browser είναι πραγματικά εντάξει

Για τη συντριπτική πλειονότητα του πραγματικού debugging — μια απάντηση API, ένα αρχείο config, ένα payload webhook — μιλάμε για kilobytes έως λίγα megabytes, όχι εκατοντάδες. Σε αυτό το εύρος, το να επικολλάς απευθείας σε έναν formatter και να παίρνεις ακαριαία, αναγνώσιμη έξοδο με ακριβείς θέσεις σφαλμάτων είναι πιο γρήγορο από το να καταφύγεις καν στη γραμμή εντολών. Το μέγεθος στο οποίο αυτό καταρρέει είναι πολύ μεγαλύτερο απ’ όσο υποθέτουν οι περισσότεροι· συγκεκριμένα “δεκάδες megabytes και πάνω” προκαλεί πραγματικό πρόβλημα, όχι “περισσότερο από μία σελίδα”.

Γρήγορη αναφορά

Μέγεθος αρχείου Τι να κάνεις
Κάτω από ~5MB Επικόλλησε απευθείας σε formatter browser — ακαριαίο, εντάξει
~5–30MB Ακόμα διαχειρίσιμο, αλλά περίμενε μια σύντομη παύση· μορφοποίησε μόνο ό,τι χρειάζεται να διαβάσεις
30MB+ Εξήγαγε πρώτα το σχετικό απόσπασμα με jq/grep, μορφοποίησε μόνο αυτό

Το εργαλείο δεν χρειάζεται μια “λειτουργία μεγάλου αρχείου” για να το διορθώσει αυτό — η λύση είναι η εξαγωγή πριν την προβολή, που είναι αλλαγή διαδικασίας, όχι περιορισμός εργαλείου.

← Επιστροφή στο blog