Wie kann man die Größe eines JavaScript-Objekts ermitteln?

Question

Ich möchte die von einem JavaScript-Objekt belegte Größe wissen.

Nehmen Sie die folgende Funktion:

function Marks(){
  this.maxMarks = 100;
}

function Student(){
  this.firstName = "firstName";
  this.lastName = "lastName";
  this.marks = new Marks();
}

Jetzt instanziere ich die student :

var stud = new Student();

so dass ich Dinge tun kann wie

stud.firstName = "new Firstname";

alert(stud.firstName);

stud.marks.maxMarks = 200;

usw.

Nun, die stud Objekt wird eine gewisse Größe im Speicher belegen. Es enthält einige Daten und weitere Objekte.

Wie kann ich herausfinden, wie viel Speicherplatz die stud Objekt einnimmt? Etwas wie ein sizeof() in JavaScript? Es wäre wirklich toll, wenn ich es mit einem einzigen Funktionsaufruf herausfinden könnte, z.B. sizeof(stud) .

Ich habe das Internet monatelang durchsucht und konnte es nicht finden (ich habe in einigen Foren gefragt - keine Antworten).

Answer 1

Diese Javascript-Bibliothek sizeof.js macht das Gleiche. Fügen Sie es so ein

<script type="text/javascript" src="sizeof.js"></script>

Die Funktion sizeof nimmt ein Objekt als Parameter und gibt dessen ungefähre Größe in Bytes zurück. Zum Beispiel:

// define an object
var object =
    {
      'boolean' : true,
      'number'  : 1,
      'string'  : 'a',
      'array'   : [1, 2, 3]
    };

// determine the size of the object
var size = sizeof(object);

Die Funktion sizeof kann Objekte behandeln, die mehrere Verweise auf andere Objekte und rekursive Verweise enthalten.

Ursprünglich hier veröffentlicht .

Answer 2

Wenn Ihr Hauptanliegen die Speichernutzung Ihrer Firefox-Erweiterung ist, empfehle ich Ihnen, sich an die Mozilla-Entwickler zu wenden.

Mozilla bietet in seinem Wiki eine Liste von Tools zur Analyse von Speicherlecks .

Answer 3

Die Chrome-Entwicklerwerkzeuge bieten diese Funktion. Ich fand diesen Artikel sehr hilfreich und tut genau das, was Sie wollen: https://developers.google.com/chrome-developer-tools/docs/heap-profiling

Answer 4

Die akzeptierte Antwort funktioniert nicht mit Map , Set , WeakMap und andere iterierbare Objekte. (Das Paket Objektgröße von das in einer anderen Antwort erwähnt wurde, hat das gleiche Problem).

Hier ist meine Lösung

export function roughSizeOfObject(object) {
  const objectList = [];
  const stack = [object];
  const bytes = [0];
  while (stack.length) {
    const value = stack.pop();
    if (value == null) bytes[0] += 4;
    else if (typeof value === 'boolean') bytes[0] += 4;
    else if (typeof value === 'string') bytes[0] += value.length * 2;
    else if (typeof value === 'number') bytes[0] += 8;
    else if (typeof value === 'object' && objectList.indexOf(value) === -1) {
      objectList.push(value);
      if (typeof value.byteLength === 'number') bytes[0] += value.byteLength;
      else if (value[Symbol.iterator]) {
        // eslint-disable-next-line no-restricted-syntax
        for (const v of value) stack.push(v);
      } else {
        Object.keys(value).forEach(k => { 
           bytes[0] += k.length * 2; stack.push(value[k]);
        });
      }
    }
  }
  return bytes[0];
}

Es enthält auch einige andere kleinere Verbesserungen: Zählt die gespeicherten Schlüssel und arbeitet mit ArrayBuffer .

Answer 5

Vielen Dank an alle, die an diesem Code gearbeitet haben!

Ich wollte nur hinzufügen, dass ich für genau die gleiche Sache gesucht habe, aber in meinem Fall ist es für die Verwaltung eines Cache von verarbeiteten Objekten zu vermeiden, neu zu analysieren und verarbeiten Objekte aus Ajax-Aufrufe, die möglicherweise oder nicht durch den Browser zwischengespeichert wurden. Dies ist besonders nützlich für Objekte, die eine Menge Verarbeitung erfordern, in der Regel alles, was nicht im JSON-Format ist, aber es kann sehr kostspielig werden, diese Dinge in einem großen Projekt oder einer App/Erweiterung, die für eine lange Zeit laufen gelassen wird, im Cache zu halten.

Jedenfalls verwende ich es für so etwas wie:

var myCache = {
    cache: {},
    order: [],
    size: 0,
    maxSize: 2 * 1024 * 1024, // 2mb

    add: function(key, object) {
        // Otherwise add new object
        var size = this.getObjectSize(object);
        if (size > this.maxSize) return; // Can't store this object

        var total = this.size + size;

        // Check for existing entry, as replacing it will free up space
        if (typeof(this.cache[key]) !== 'undefined') {
            for (var i = 0; i < this.order.length; ++i) {
                var entry = this.order[i];
                if (entry.key === key) {
                    total -= entry.size;
                    this.order.splice(i, 1);
                    break;
                }
            }
        }

        while (total > this.maxSize) {
            var entry = this.order.shift();
            delete this.cache[entry.key];
            total -= entry.size;
        }

        this.cache[key] = object;
        this.order.push({ size: size, key: key });
        this.size = total;
    },

    get: function(key) {
        var value = this.cache[key];
        if (typeof(value) !== 'undefined') { // Return this key for longer
            for (var i = 0; i < this.order.length; ++i) {
                var entry = this.order[i];
                if (entry.key === key) {
                    this.order.splice(i, 1);
                    this.order.push(entry);
                    break;
                }
            }
        }
        return value;
    },

    getObjectSize: function(object) {
        // Code from above estimating functions
    },
};

Es ist ein vereinfachtes Beispiel und kann einige Fehler enthalten, aber es vermittelt die Idee, dass man damit statische Objekte (deren Inhalt sich nicht ändert) mit einem gewissen Grad an Intelligenz festhalten kann. Dies kann die teuren Verarbeitungsanforderungen, die für die Erstellung des Objekts erforderlich sind, erheblich reduzieren.