Come ottenere le dimensioni di un oggetto JavaScript?

Voglio sapere la dimensione occupata da un oggetto JavaScript.

Prendi la seguente funzione:

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

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

Ora ho un'istanza di student:

var stud = new Student();

in modo che io possa fare cose del genere

stud.firstName = "new Firstname";

alert(stud.firstName);

stud.marks.maxMarks = 200;

eccetera.

Ora, l' studoggetto occuperà alcune dimensioni in memoria. Ha alcuni dati e più oggetti.

Come faccio a sapere quanta memoria studoccupa l' oggetto? Qualcosa come un sizeof()in JavaScript? Sarebbe davvero fantastico se potessi scoprirlo in una singola chiamata di funzione come sizeof(stud).

Ho cercato su Internet per mesi - non sono riuscito a trovarlo (chiesto in un paio di forum - nessuna risposta).

Ho inserito nuovamente il codice nella mia risposta originale . Ho rimosso la ricorsione e rimosso la presunta esistenza ambientale.

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;
}

Google Chrome Heap Profiler ti consente di controllare l'utilizzo della memoria degli oggetti.

Devi essere in grado di individuare l'oggetto nella traccia che può essere complicato. Se aggiungi l'oggetto a Windows globale, è abbastanza facile trovarlo dalla modalità di elenco "Contenimento".

Nella schermata allegata, ho creato un oggetto chiamato "testObj" sulla finestra. Ho quindi individuato il profiler (dopo aver effettuato una registrazione) e mostra le dimensioni complete dell'oggetto e tutto ciò che contiene in "dimensione mantenuta".

Maggiori dettagli sui guasti della memoria .

Nella schermata sopra, l'oggetto mostra una dimensione mantenuta di 60. Credo che l'unità sia byte qui.

Ho appena scritto questo per risolvere un problema simile (ish). Non fa esattamente quello che stai cercando, cioè non tiene conto del modo in cui l'interprete memorizza l'oggetto.

Ma, se stai usando V8, dovrebbe darti un'approssimazione abbastanza buona dato che l'incredibile prototipazione e le classi nascoste assorbono la maggior parte delle spese generali.

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 );
}

A volte lo uso per contrassegnare oggetti veramente grandi che potrebbero essere indirizzati al client dal server. Non rappresenta l'impronta in memoria. Ti dà solo approssimativamente quanto costerebbe inviarlo o memorizzarlo.

Inoltre, è lento, solo dev. Ma per ottenere una risposta da ballpark con una riga di codice è stato utile per me.

roughObjSize = JSON.stringify(bigObject).length;

Ecco una soluzione leggermente più compatta al problema:

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);

Esiste un modulo NPM per ottenere le dimensioni dell'oggetto , con cui è possibile installarlonpm 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));

Questo è un metodo confuso, ma l'ho provato due volte con numeri diversi e sembra coerente.

Quello che puoi fare è provare e allocare un numero enorme di oggetti, come uno o due milioni di oggetti del tipo che desideri. Metti gli oggetti in un array per impedire al garbage collector di rilasciarli (nota che questo aggiungerà un leggero sovraccarico di memoria a causa dell'array, ma spero che questo non abbia importanza e inoltre se ti preoccuperai che gli oggetti siano in memoria , li memorizzi da qualche parte). Aggiungi un avviso prima e dopo l'assegnazione e in ogni avviso controlla quanta memoria sta occupando il processo di Firefox. Prima di aprire la pagina con il test, assicurarsi di disporre di una nuova istanza di Firefox. Aprire la pagina, notare l'utilizzo della memoria dopo la visualizzazione dell'avviso "prima". Chiudi l'avviso, attendi che la memoria sia allocata. Sottrarre la nuova memoria dalla vecchia e dividerla per la quantità di allocazioni.

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');

Ho provato questo nel mio computer e il processo aveva 48352K di memoria quando è stato mostrato l'avviso "prima". Dopo l'allocazione, Firefox aveva 440236 KB di memoria. Per 2 milioni di allocazioni, si tratta di circa 200 byte per ogni oggetto.

L'ho provato di nuovo con 1 milione di allocazioni e il risultato è stato simile: 196 byte per oggetto (suppongo che i dati extra in 2mill siano stati usati per l'array).

Quindi, ecco un metodo confuso che potrebbe aiutarti. JavaScript non fornisce un metodo "sizeof" per un motivo: ogni implementazione JavaScript è diversa. In Google Chrome, ad esempio, la stessa pagina utilizza circa 66 byte per ogni oggetto (a giudicare dal task manager almeno).

Mi dispiace non poter commentare, quindi continuo il lavoro da domani. Questa versione avanzata non conterà più di una volta l'oggetto, quindi nessun ciclo infinito. Inoltre, ritengo che anche la chiave di un oggetto debba essere contata, approssimativamente.

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);

Avere lo stesso problema. Ho cercato su Google e voglio condividere con la comunità stackoverflow questa soluzione.

Importante :

Ho usato la funzione condivisa da Yan Qing su github https://gist.github.com/zensh/4975495

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);

Cosa ne pensi?

voglio sapere se i miei sforzi di riduzione della memoria mi aiutano davvero a ridurre la memoria

In seguito a questo commento, ecco cosa dovresti fare: prova a produrre un problema di memoria: scrivi un codice che crei tutti questi oggetti e aumenti grossolanamente il limite superiore fino a quando non ti imbatti in un problema (blocco del browser, blocco del browser o Out-Of- errore di memoria). Idealmente, dovresti ripetere questo esperimento con diversi browser e diversi sistemi operativi.

Ora ci sono due opzioni: opzione 1 - Non sei riuscito a produrre il problema di memoria. Quindi, ti stai preoccupando per niente. Non hai problemi di memoria e il tuo programma va bene.

opzione 2- hai avuto un problema di memoria. Ora chiediti se il limite al quale si è verificato il problema è ragionevole (in altre parole: è probabile che questa quantità di oggetti venga creata durante l'uso normale del tuo codice). Se la risposta è "No", allora stai bene. Altrimenti ora sai quanti oggetti può creare il tuo codice. Rielaborare l'algoritmo in modo tale da non violare questo limite.

Se la tua preoccupazione principale è l'uso della memoria dell'estensione Firefox, ti suggerisco di verificare con gli sviluppatori Mozilla.

Mozilla fornisce sul suo wiki un elenco di strumenti per analizzare le perdite di memoria .

Questa libreria Javascript sizeof.jsfa la stessa cosa. Includilo in questo modo

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

La funzione sizeof accetta un oggetto come parametro e restituisce la sua dimensione approssimativa in byte. Per esempio:

// 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);

La funzione sizeof può gestire oggetti che contengono più riferimenti ad altri oggetti e riferimenti ricorsivi.

Originariamente pubblicato qui .

Gli strumenti di sviluppo di Chrome hanno questa funzionalità. Ho trovato questo articolo molto utile e fa esattamente quello che vuoi: https://developers.google.com/chrome-developer-tools/docs/heap-profiling

Mille grazie a tutti coloro che hanno lavorato al codice per questo!

Volevo solo aggiungere che stavo cercando esattamente la stessa cosa, ma nel mio caso è per la gestione di una cache di oggetti elaborati per evitare di dover analizzare nuovamente ed elaborare oggetti da chiamate ajax che potrebbero essere state o meno memorizzate nella cache dal browser. Ciò è particolarmente utile per gli oggetti che richiedono molta elaborazione, in genere tutto ciò che non è in formato JSON, ma può essere molto costoso mantenere queste cose memorizzate nella cache in un progetto di grandi dimensioni o in un'app / estensione che viene lasciata in esecuzione per un lungo periodo tempo.

Ad ogni modo, lo uso per qualcosa del tipo:

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
    },
};

È un esempio semplicistico e può contenere alcuni errori, ma dà l'idea, in quanto puoi usarlo per trattenere oggetti statici (i contenuti non cambieranno) con un certo grado di intelligenza. Ciò può ridurre in modo significativo tutti i costosi requisiti di elaborazione che l'oggetto doveva essere prodotto in primo luogo.

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;
}

Uso la scheda Timeline degli strumenti di sviluppo di Chrome , creo istanze di quantità sempre più grandi di oggetti e ottengo buone stime del genere. Puoi usare html come questo qui sotto, come boilerplate, e modificarlo per simulare meglio le caratteristiche dei tuoi oggetti (numero e tipi di proprietà, ecc ...). Puoi fare clic sull'icona del cestino nella parte inferiore della scheda degli strumenti di sviluppo, prima e dopo l'esecuzione.

<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>

L'istanza di 2 milioni di oggetti di una sola proprietà ciascuno (come in questo codice sopra) porta a un calcolo approssimativo di 50 byte per oggetto, sul mio Chromium, in questo momento. La modifica del codice per creare una stringa casuale per oggetto aggiunge circa 30 byte per oggetto, ecc. Spero che questo aiuti.

Se è necessario controllare a livello di programmazione per aprox. dimensione degli oggetti è inoltre possibile controllare questa libreria http://code.stephenmorley.org/javascript/finding-the-memory-usage-of-objects/ che sono stato in grado di usare per la dimensione degli oggetti.

Altrimenti, suggerisco di utilizzare il profilatore Heap di Chrome / Firefox.

Credo che tu abbia dimenticato di includere 'array'.

  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";
        }
    },

Lo so questo non è assolutamente il modo giusto per farlo, eppure mi it've aiutato un paio di volte in passato per ottenere la dimensione del file oggetto circa:

Scrivi l'oggetto / la risposta sulla console o su una nuova scheda, copia i risultati in un nuovo file di blocco note, salvalo e controlla le dimensioni del file. Il file del blocco note stesso ha solo pochi byte, quindi otterrai una dimensione del file oggetto abbastanza accurata.