¿Cómo obtener el tamaño de un objeto JavaScript?

Quiero saber el tamaño ocupado por un objeto JavaScript.

Tome la siguiente función:

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

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

Ahora instanciaré el student:

var stud = new Student();

para poder hacer cosas como

stud.firstName = "new Firstname";

alert(stud.firstName);

stud.marks.maxMarks = 200;

etc.

Ahora, el studobjeto ocupará algún tamaño en la memoria. Tiene algunos datos y más objetos.

¿Cómo averiguo cuánta memoria studocupa el objeto? Algo así como un sizeof()en JavaScript? Sería realmente increíble si pudiera descubrirlo en una sola llamada de función como sizeof(stud).

He estado buscando en Internet durante meses, no pude encontrarlo (preguntado en un par de foros, sin respuestas).

He refactorizado el código en mi respuesta original . Eliminé la recursión y eliminé la supuesta existencia por encima.

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 le permite inspeccionar el uso de la memoria de objetos.

Debe poder ubicar el objeto en la traza, lo que puede ser complicado. Si fija el objeto a la ventana global, es bastante fácil de encontrar desde el modo de listado "Contención".

En la captura de pantalla adjunta, creé un objeto llamado "testObj" en la ventana. Luego lo ubiqué en el generador de perfiles (después de hacer una grabación) y muestra el tamaño completo del objeto y todo lo que contiene en "tamaño retenido".

Más detalles sobre los desgloses de memoria .

En la captura de pantalla anterior, el objeto muestra un tamaño retenido de 60. Creo que la unidad es bytes aquí.

Acabo de escribir esto para resolver un problema similar (ish). No hace exactamente lo que está buscando, es decir, no tiene en cuenta cómo el intérprete almacena el objeto.

Pero, si está utilizando V8, debería darle una aproximación bastante correcta, ya que los impresionantes prototipos y las clases ocultas absorben la mayor parte de la sobrecarga.

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 veces lo uso para marcar objetos realmente grandes que podrían ir al cliente desde el servidor. No representa la huella en memoria. Simplemente le da aproximadamente lo que costaría enviarlo o almacenarlo.

También tenga en cuenta que es lento, solo para desarrolladores. Pero para obtener una respuesta aproximada con una línea de código me ha sido útil.

roughObjSize = JSON.stringify(bigObject).length;

Aquí hay una solución un poco más compacta para el 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);

Hay un módulo NPM para obtener el tamaño del objeto , puede instalarlo connpm 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));

Este es un método hacky, pero lo intenté dos veces con diferentes números y parece ser consistente.

Lo que puede hacer es tratar de asignar una gran cantidad de objetos, como uno o dos millones de objetos del tipo que desee. Coloque los objetos en una matriz para evitar que el recolector de basura los libere (tenga en cuenta que esto agregará una ligera sobrecarga de memoria debido a la matriz, pero espero que esto no importe y además si se va a preocupar de que los objetos estén en la memoria , los guardas en alguna parte). Agregue una alerta antes y después de la asignación y en cada alerta verifique cuánta memoria está tomando el proceso de Firefox. Antes de abrir la página con la prueba, asegúrese de tener una nueva instancia de Firefox. Abra la página, observe el uso de memoria después de que se muestre la alerta "antes". Cierre la alerta, espere a que se asigne la memoria. Reste la nueva memoria de la anterior y divídala por la cantidad de asignaciones.

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

Intenté esto en mi computadora y el proceso tenía 48352K de memoria cuando se mostró la alerta "antes". Después de la asignación, Firefox tenía 440236K de memoria. Para 2 millones de asignaciones, esto es aproximadamente 200 bytes para cada objeto.

Lo intenté nuevamente con 1 millón de asignaciones y el resultado fue similar: 196 bytes por objeto (supongo que los datos adicionales en 2 millones se usaron para la matriz).

Entonces, aquí hay un método hacky que podría ayudarte. JavaScript no proporciona un método "sizeof" por una razón: cada implementación de JavaScript es diferente. En Google Chrome, por ejemplo, la misma página usa aproximadamente 66 bytes para cada objeto (a juzgar por el administrador de tareas al menos).

Lo siento, no pude comentar, así que solo continúo el trabajo de tomwrong. Esta versión mejorada no contará el objeto más de una vez, por lo tanto, no habrá bucle infinito. Además, creo que la clave de un objeto también debe contarse, aproximadamente.

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

Tener el mismo problema Busqué en Google y quiero compartir con la comunidad stackoverflow esta solución.

Importante :

Usé la función compartida por Yan Qing en 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);

¿Qué piensa usted al respecto?

Quiero saber si mis esfuerzos de reducción de memoria realmente ayudan a reducir la memoria

A continuación de este comentario, esto es lo que debe hacer: Intente generar un problema de memoria: escriba un código que cree todos estos objetos y aumente gradualmente el límite superior hasta que se encuentre con un problema (bloqueo del navegador, bloqueo del navegador o falta de disponibilidad) error de memoria). Idealmente, debe repetir este experimento con diferentes navegadores y diferentes sistemas operativos.

Ahora hay dos opciones: opción 1: no logró generar el problema de memoria. Por lo tanto, no te preocupas por nada. No tiene un problema de memoria y su programa está bien.

opción 2: tienes un problema de memoria. Ahora pregúntese si el límite en el que ocurrió el problema es razonable (en otras palabras: es probable que esta cantidad de objetos se cree con el uso normal de su código). Si la respuesta es 'No', entonces estás bien. De lo contrario, ahora sabe cuántos objetos puede crear su código. Vuelva a trabajar el algoritmo de modo que no viole este límite.

Si su principal preocupación es el uso de memoria de su extensión de Firefox, le sugiero que consulte con los desarrolladores de Mozilla.

Mozilla proporciona en su wiki una lista de herramientas para analizar pérdidas de memoria .

Esta biblioteca Javascript sizeof.jshace lo mismo. Inclúyalo así

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

La función sizeof toma un objeto como parámetro y devuelve su tamaño aproximado en bytes. Por ejemplo:

// 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 función sizeof puede manejar objetos que contienen múltiples referencias a otros objetos y referencias recursivas.

Originalmente publicado aquí .

Las herramientas para desarrolladores de Chrome tienen esta funcionalidad. Este artículo me pareció muy útil y hace exactamente lo que quieres: https://developers.google.com/chrome-developer-tools/docs/heap-profiling

¡Muchas gracias a todos los que han estado trabajando en el código para esto!

Solo quería agregar que he estado buscando exactamente lo mismo, pero en mi caso es para administrar un caché de objetos procesados ​​para evitar tener que volver a analizar y procesar objetos de llamadas ajax que pueden o no haber sido almacenadas en caché por el navegador Esto es especialmente útil para objetos que requieren mucho procesamiento, generalmente cualquier cosa que no esté en formato JSON, pero puede ser muy costoso mantener estas cosas en caché en un proyecto grande o una aplicación / extensión que se deja en funcionamiento durante mucho tiempo hora.

De todos modos, lo uso para algo como:

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 un ejemplo simplista y puede tener algunos errores, pero da la idea, ya que puede usarlo para retener objetos estáticos (el contenido no cambiará) con cierto grado de inteligencia. Esto puede reducir significativamente los costosos requisitos de procesamiento que el objeto tuvo que ser producido en primer lugar.

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

Utilizo la pestaña Línea de tiempo de las herramientas de desarrollo de Chrome , instancia cada vez más grandes cantidades de objetos y obtengo buenas estimaciones como esa. Puede usar html como este a continuación, como repetitivo, y modificarlo para simular mejor las características de sus objetos (número y tipos de propiedades, etc.). Es posible que desee hacer clic en el icono de bit de basura en la parte inferior de esa pestaña de herramientas de desarrollo, antes y después de una ejecución.

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

Instanciar 2 millones de objetos de una sola propiedad cada uno (como en este código anterior) conduce a un cálculo aproximado de 50 bytes por objeto, en mi Chromium, en este momento. Cambiar el código para crear una cadena aleatoria por objeto agrega unos 30 bytes por objeto, etc. Espero que esto ayude.

Si necesita verificar programáticamente por aprox. tamaño de los objetos también puede consultar esta biblioteca http://code.stephenmorley.org/javascript/finding-the-memory-usage-of-objects/ que he podido usar para el tamaño de los objetos.

De lo contrario, sugiero usar Chrome / Firefox Heap Profiler.

Creo que olvidó incluir '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";
        }
    },

Yo sé que esto no es absolutamente la manera correcta de hacerlo, sin embargo it've me ayudó un par de veces en el pasado para obtener el tamaño de archivo de objeto aprox:

Escriba su objeto / respuesta en la consola o en una nueva pestaña, copie los resultados en un nuevo archivo de bloc de notas, guárdelo y verifique el tamaño del archivo. El archivo del bloc de notas en sí es de unos pocos bytes, por lo que obtendrá un tamaño de archivo de objeto bastante preciso.