Wie erhalte ich die Größe eines JavaScript-Objekts?

Ich möchte wissen, wie groß ein JavaScript-Objekt ist.

Übernehmen Sie die folgende Funktion:

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

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

Jetzt instanziiere ich das student:

var stud = new Student();

damit ich solche Sachen machen kann

stud.firstName = "new Firstname";

alert(stud.firstName);

stud.marks.maxMarks = 200;

etc.

Jetzt nimmt das studObjekt eine gewisse Größe im Speicher ein. Es hat einige Daten und mehr Objekte.

Wie finde ich heraus, wie viel Speicher das studObjekt belegt? So etwas wie ein sizeof()in JavaScript? Es wäre wirklich großartig, wenn ich es in einem einzigen Funktionsaufruf wie herausfinden könnte sizeof(stud).

Ich habe monatelang im Internet gesucht - konnte es nicht finden (in einigen Foren gefragt - keine Antworten).

Ich habe den Code in meiner ursprünglichen Antwort neu berücksichtigt . Ich habe die Rekursion entfernt und den angenommenen Existenzaufwand entfernt.

function roughSizeOfObject( object ) {

    var objectList = [];
    var stack = [ object ];
    var bytes = 0;

    while ( stack.length ) {
        var value = stack.pop();

        if ( typeof value === 'boolean' ) {
            bytes += 4;
        }
        else if ( typeof value === 'string' ) {
            bytes += value.length * 2;
        }
        else if ( typeof value === 'number' ) {
            bytes += 8;
        }
        else if
        (
            typeof value === 'object'
            && objectList.indexOf( value ) === -1
        )
        {
            objectList.push( value );

            for( var i in value ) {
                stack.push( value[ i ] );
            }
        }
    }
    return bytes;
}

Mit dem Google Chrome Heap Profiler können Sie die Verwendung des Objektspeichers überprüfen.

Sie müssen in der Lage sein, das Objekt in der Ablaufverfolgung zu finden, was schwierig sein kann. Wenn Sie das Objekt an das globale Fenster anheften, ist es im Listenmodus "Containment" ziemlich einfach zu finden.

Im angehängten Screenshot habe ich im Fenster ein Objekt namens "testObj" erstellt. Ich habe mich dann im Profiler befunden (nachdem ich eine Aufnahme gemacht habe) und es zeigt die volle Größe des Objekts und alles darin unter "beibehaltene Größe".

Weitere Details zu den Speicherausfällen .

Im obigen Screenshot zeigt das Objekt eine beibehaltene Größe von 60. Ich glaube, die Einheit besteht hier aus Bytes.

Ich habe dies gerade geschrieben, um ein ähnliches (ish) Problem zu lösen. Es macht nicht genau das, wonach Sie suchen, dh es berücksichtigt nicht, wie der Interpreter das Objekt speichert.

Wenn Sie jedoch V8 verwenden, sollte dies eine ziemlich gute Annäherung sein, da das großartige Prototyping und die versteckten Klassen den größten Teil des Overheads ausmachen.

function roughSizeOfObject( object ) {

    var objectList = [];

    var recurse = function( value )
    {
        var bytes = 0;

        if ( typeof value === 'boolean' ) {
            bytes = 4;
        }
        else if ( typeof value === 'string' ) {
            bytes = value.length * 2;
        }
        else if ( typeof value === 'number' ) {
            bytes = 8;
        }
        else if
        (
            typeof value === 'object'
            && objectList.indexOf( value ) === -1
        )
        {
            objectList[ objectList.length ] = value;

            for( i in value ) {
                bytes+= 8; // an assumed existence overhead
                bytes+= recurse( value[i] )
            }
        }

        return bytes;
    }

    return recurse( object );
}

Manchmal benutze ich dies, um wirklich große Objekte zu kennzeichnen, die möglicherweise vom Server an den Client gesendet werden. Es repräsentiert nicht den Footprint im Speicher. Sie erhalten nur ungefähr das, was es kosten würde, es zu senden oder zu speichern.

Beachten Sie auch, dass es langsam ist, nur Entwickler. Aber um eine Standardantwort mit einer Codezeile zu erhalten, war es für mich nützlich.

roughObjSize = JSON.stringify(bigObject).length;

Hier ist eine etwas kompaktere Lösung für das Problem:

const typeSizes = {
  "undefined": () => 0,
  "boolean": () => 4,
  "number": () => 8,
  "string": item => 2 * item.length,
  "object": item => !item ? 0 : Object
    .keys(item)
    .reduce((total, key) => sizeOf(key) + sizeOf(item[key]) + total, 0)
};

const sizeOf = value => typeSizes[typeof value](value);

Es gibt ein NPM-Modul zum Abrufen der Objektgröße , mit dem Sie es installieren könnennpm install object-sizeof

  var sizeof = require('object-sizeof');

  // 2B per character, 6 chars total => 12B
  console.log(sizeof({abc: 'def'}));

  // 8B for Number => 8B
  console.log(sizeof(12345));

  var param = { 
    'a': 1, 
    'b': 2, 
    'c': {
      'd': 4
    }
  };
  // 4 one two-bytes char strings and 3 eighth-bytes numbers => 32B
  console.log(sizeof(param));

Dies ist eine hackige Methode, aber ich habe es zweimal mit verschiedenen Zahlen versucht und es scheint konsistent zu sein.

Sie können versuchen, eine große Anzahl von Objekten zuzuweisen , z. B. ein oder zwei Millionen Objekte der gewünschten Art. Platzieren Sie die Objekte in einem Array, um zu verhindern, dass der Garbage Collector sie freigibt (beachten Sie, dass dies aufgrund des Arrays einen leichten Speicheraufwand verursacht, aber ich hoffe, dass dies keine Rolle spielt und außerdem, wenn Sie sich Sorgen machen, dass sich Objekte im Speicher befinden , Sie speichern sie irgendwo). Fügen Sie vor und nach der Zuweisung eine Warnung hinzu und überprüfen Sie in jeder Warnung, wie viel Speicher der Firefox-Prozess belegt. Stellen Sie vor dem Öffnen der Seite mit dem Test sicher, dass Sie über eine neue Firefox-Instanz verfügen. Öffnen Sie die Seite und beachten Sie die Speichernutzung, nachdem die Warnung "Vorher" angezeigt wurde. Schließen Sie die Warnung und warten Sie, bis der Speicher zugewiesen wurde. Subtrahieren Sie den neuen Speicher vom älteren und dividieren Sie ihn durch die Anzahl der Zuordnungen.

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

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

var manyObjects = new Array();
alert('before');
for (var i=0; i<2000000; i++)
    manyObjects[i] = new Student();
alert('after');

Ich habe dies auf meinem Computer versucht und der Prozess hatte 48352 KB Speicher, als die Warnung "Vorher" angezeigt wurde. Nach der Zuweisung hatte Firefox 440236 KB Speicher. Bei 2 Millionen Zuordnungen sind dies ungefähr 200 Bytes für jedes Objekt.

Ich habe es erneut mit 1 Million Zuordnungen versucht und das Ergebnis war ähnlich: 196 Bytes pro Objekt (ich nehme an, die zusätzlichen Daten in 2 Mill wurden für Array verwendet).

Hier ist eine hackige Methode, die Ihnen helfen könnte. JavaScript bietet aus einem bestimmten Grund keine "sizeof" -Methode: Jede JavaScript-Implementierung ist anders. In Google Chrome verwendet dieselbe Seite beispielsweise ungefähr 66 Byte für jedes Objekt (zumindest nach dem Task-Manager).

Entschuldigung, ich konnte keinen Kommentar abgeben, also setze ich einfach die Arbeit von Tomwrong fort. Diese erweiterte Version zählt Objekte nicht mehr als einmal, also keine Endlosschleife. Außerdem denke ich, dass der Schlüssel eines Objekts ungefähr gezählt werden sollte.

function roughSizeOfObject( value, level ) {
    if(level == undefined) level = 0;
    var bytes = 0;

    if ( typeof value === 'boolean' ) {
        bytes = 4;
    }
    else if ( typeof value === 'string' ) {
        bytes = value.length * 2;
    }
    else if ( typeof value === 'number' ) {
        bytes = 8;
    }
    else if ( typeof value === 'object' ) {
        if(value['__visited__']) return 0;
        value['__visited__'] = 1;
        for( i in value ) {
            bytes += i.length * 2;
            bytes+= 8; // an assumed existence overhead
            bytes+= roughSizeOfObject( value[i], 1 )
        }
    }

    if(level == 0){
        clear__visited__(value);
    }
    return bytes;
}

function clear__visited__(value){
    if(typeof value == 'object'){
        delete value['__visited__'];
        for(var i in value){
            clear__visited__(value[i]);
        }
    }
}

roughSizeOfObject(a);

Das gleiche Problem haben. Ich habe bei Google gesucht und möchte diese Lösung mit der Stackoverflow-Community teilen.

Wichtig :

Ich habe die von Yan Qing auf github https://gist.github.com/zensh/4975495 gemeinsam genutzte Funktion verwendet

function memorySizeOf(obj) {
    var bytes = 0;

    function sizeOf(obj) {
        if(obj !== null && obj !== undefined) {
            switch(typeof obj) {
            case 'number':
                bytes += 8;
                break;
            case 'string':
                bytes += obj.length * 2;
                break;
            case 'boolean':
                bytes += 4;
                break;
            case 'object':
                var objClass = Object.prototype.toString.call(obj).slice(8, -1);
                if(objClass === 'Object' || objClass === 'Array') {
                    for(var key in obj) {
                        if(!obj.hasOwnProperty(key)) continue;
                        sizeOf(obj[key]);
                    }
                } else bytes += obj.toString().length * 2;
                break;
            }
        }
        return bytes;
    };

    function formatByteSize(bytes) {
        if(bytes < 1024) return bytes + " bytes";
        else if(bytes < 1048576) return(bytes / 1024).toFixed(3) + " KiB";
        else if(bytes < 1073741824) return(bytes / 1048576).toFixed(3) + " MiB";
        else return(bytes / 1073741824).toFixed(3) + " GiB";
    };

    return formatByteSize(sizeOf(obj));
};


var sizeOfStudentObject = memorySizeOf({Student: {firstName: 'firstName', lastName: 'lastName', marks: 10}});
console.log(sizeOfStudentObject);

Was denkst du darüber?

Ich möchte wissen, ob meine Bemühungen zur Reduzierung des Gedächtnisses tatsächlich zur Reduzierung des Gedächtnisses beitragen

Im Anschluss an diesen Kommentar sollten Sie Folgendes tun: Versuchen Sie, ein Speicherproblem zu erzeugen - Schreiben Sie Code, der alle diese Objekte erstellt, und erhöhen Sie die Obergrenze grafisch, bis Sie auf ein Problem stoßen (Browserabsturz, Einfrieren des Browsers oder ein Out-Of-). Speicherfehler). Idealerweise sollten Sie dieses Experiment mit verschiedenen Browsern und verschiedenen Betriebssystemen wiederholen.

Jetzt gibt es zwei Möglichkeiten: Option 1 - Es ist Ihnen nicht gelungen, das Speicherproblem zu erzeugen. Daher sorgen Sie sich um nichts. Sie haben kein Speicherproblem und Ihr Programm ist in Ordnung.

Option 2: Sie haben ein Speicherproblem. Fragen Sie sich nun, ob die Grenze, an der das Problem aufgetreten ist, angemessen ist (mit anderen Worten: Ist es wahrscheinlich, dass diese Anzahl von Objekten bei normaler Verwendung Ihres Codes erstellt wird)? Wenn die Antwort "Nein" lautet, geht es Ihnen gut. Ansonsten wissen Sie jetzt, wie viele Objekte Ihr Code erstellen kann. Überarbeiten Sie den Algorithmus so, dass er diese Grenze nicht überschreitet.

Wenn Ihr Hauptanliegen die Speichernutzung Ihrer Firefox-Erweiterung ist, empfehlen wir Ihnen, sich bei Mozilla-Entwicklern zu erkundigen.

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

Diese Javascript-Bibliothek sizeof.jsmacht das Gleiche. Schließen Sie es so ein

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

Die Funktion sizeof verwendet ein Objekt als Parameter und gibt seine ungefähre Größe in Byte zurück. Beispielsweise:

// 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 verarbeiten, die mehrere Verweise auf andere Objekte und rekursive Verweise enthalten.

Ursprünglich hier veröffentlicht .

Chrome-Entwicklertools verfügen über diese Funktionalität. Ich fand diesen Artikel sehr hilfreich und mache genau das, was Sie wollen: https://developers.google.com/chrome-developer-tools/docs/heap-profiling

Vielen Dank an alle, die dafür an Code gearbeitet haben!

Ich wollte nur hinzufügen, dass ich genau das Gleiche gesucht habe, aber in meinem Fall dient es dazu, einen Cache mit verarbeiteten Objekten zu verwalten, um zu vermeiden, dass Objekte aus Ajax-Aufrufen, die möglicherweise zwischengespeichert wurden oder nicht, erneut analysiert und verarbeitet werden müssen vom Browser. Dies ist besonders nützlich für Objekte, die viel Verarbeitung erfordern, normalerweise alles, was nicht im JSON-Format vorliegt. Es kann jedoch sehr kostspielig werden, diese Dinge in einem großen Projekt oder einer App / Erweiterung zwischenzuspeichern, die noch lange ausgeführt wird Zeit.

Wie auch immer, ich benutze 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 gibt die Idee, da Sie es verwenden können, um statische Objekte (Inhalte ändern sich nicht) mit einem gewissen Maß an Intelligenz festzuhalten. Dies kann die teuren Verarbeitungsanforderungen, die das Objekt überhaupt stellen musste, erheblich reduzieren.

function sizeOf(parent_data, size)
{
    for (var prop in parent_data)
    {
        let value = parent_data[prop];

        if (typeof value === 'boolean')
        {
            size += 4;
        }
        else if (typeof value === 'string')
        {
            size += value.length * 2;
        }
        else if (typeof value === 'number')
        {
             size += 8;
        }
        else
        {      
            let oldSize = size;
            size += sizeOf(value, oldSize) - oldSize;
        }
    }

    return size;
}


function roughSizeOfObject(object)
{   
    let size = 0;
    for each (let prop in object)
    {    
        size += sizeOf(prop, 0);
    } // for..
    return size;
}

Ich verwende die Registerkarte " Zeitleiste" der Chrome-Entwicklungstools , instanziiere immer mehr Objekte und erhalte solche guten Schätzungen. Sie können HTML wie dieses unten als Boilerplate verwenden und es ändern, um die Eigenschaften Ihrer Objekte (Anzahl und Art der Eigenschaften usw.) besser zu simulieren. Möglicherweise möchten Sie vor und nach einem Lauf auf das Papierkorbsit-Symbol unten auf der Registerkarte "Entwicklungswerkzeuge" klicken.

<html>
<script>
var size = 1000*100
window.onload = function() {
  document.getElementById("quantifier").value = size
}

function scaffold()
{
  console.log("processing Scaffold...");
  a = new Array
}

function start()
{
  size = document.getElementById("quantifier").value
  console.log("Starting... quantifier is " + size);
  console.log("starting test")
  for (i=0; i<size; i++){
    a[i]={"some" : "thing"}
  }
  console.log("done...")
}

function tearDown()
{
  console.log("processing teardown");
  a.length=0
}

</script>
<body>
    <span style="color:green;">Quantifier:</span>
    <input id="quantifier" style="color:green;" type="text"></input>
    <button onclick="scaffold()">Scaffold</button>
    <button onclick="start()">Start</button>
    <button onclick="tearDown()">Clean</button>
    <br/>
</body>
</html>

Das Instanziieren von 2 Millionen Objekten mit jeweils nur einer Eigenschaft (wie in diesem Code oben) führt derzeit zu einer groben Berechnung von 50 Bytes pro Objekt auf meinem Chromium. Durch Ändern des Codes zum Erstellen einer zufälligen Zeichenfolge pro Objekt werden etwa 30 Byte pro Objekt usw. hinzugefügt. Ich hoffe, dies hilft.

Wenn Sie programmgesteuert nach ca. suchen müssen. Größe von Objekten Sie können auch diese Bibliothek überprüfen http://code.stephenmorley.org/javascript/finding-the-memory-usage-of-objects/ , die ich für die Objektgröße verwenden konnte.

Ansonsten schlage ich vor, den Chrome / Firefox Heap Profiler zu verwenden.

Ich glaube, Sie haben vergessen, 'Array' einzuschließen.

  typeOf : function(value) {
        var s = typeof value;
        if (s === 'object')
        {
            if (value)
            {
                if (typeof value.length === 'number' && !(value.propertyIsEnumerable('length')) && typeof value.splice === 'function')
                {
                    s = 'array';
                }
            }
            else
            {
                s = 'null';
            }
        }
        return s;
    },

   estimateSizeOfObject: function(value, level)
    {
        if(undefined === level)
            level = 0;

        var bytes = 0;

        if ('boolean' === typeOf(value))
            bytes = 4;
        else if ('string' === typeOf(value))
            bytes = value.length * 2;
        else if ('number' === typeOf(value))
            bytes = 8;
        else if ('object' === typeOf(value) || 'array' === typeOf(value))
        {
            for(var i in value)
            {
                bytes += i.length * 2;
                bytes+= 8; // an assumed existence overhead
                bytes+= estimateSizeOfObject(value[i], 1)
            }
        }
        return bytes;
    },

   formatByteSize : function(bytes)
    {
        if (bytes < 1024)
            return bytes + " bytes";
        else
        {
            var floatNum = bytes/1024;
            return floatNum.toFixed(2) + " kb";
        }
    },

Ich weiß, dass dies absolut nicht der richtige Weg ist, aber es hat mir in der Vergangenheit einige Male geholfen, die ungefähre Objektdateigröße zu ermitteln:

Schreiben Sie Ihr Objekt / Ihre Antwort in die Konsole oder auf eine neue Registerkarte, kopieren Sie die Ergebnisse in eine neue Editor-Datei, speichern Sie sie und überprüfen Sie die Dateigröße. Die Editor-Datei selbst besteht nur aus wenigen Bytes, sodass Sie eine ziemlich genaue Größe der Objektdatei erhalten.