Como obter o tamanho de um objeto JavaScript?

Quero saber o tamanho ocupado por um objeto JavaScript.

Execute a seguinte função:

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

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

Agora instanciamos o student:

var stud = new Student();

para que eu possa fazer coisas como

stud.firstName = "new Firstname";

alert(stud.firstName);

stud.marks.maxMarks = 200;

etc.

Agora, o studobjeto ocupará algum tamanho na memória. Possui alguns dados e mais objetos.

Como descubro quanta memória o studobjeto ocupa? Algo como um sizeof()em JavaScript? Seria realmente incrível se eu pudesse descobrir isso em uma única chamada de função como sizeof(stud).

Venho pesquisando na Internet há meses - não consegui encontrá-la (solicitada em alguns fóruns - sem respostas).

Eu refiz o código na minha resposta original . Eu removi a recursão e a sobrecarga de existência assumida.

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

O Google Chrome Heap Profiler permite que você inspecione o uso da memória do objeto.

Você precisa localizar o objeto no rastreamento, o que pode ser complicado. Se você fixar o objeto na janela global, é muito fácil encontrá-lo no modo de listagem "Contenção".

Na captura de tela anexada, criei um objeto chamado "testObj" na janela. Eu então localizei no criador de perfil (depois de fazer uma gravação) e ele mostra o tamanho total do objeto e tudo em "tamanho retido".

Mais detalhes sobre as falhas de memória .

Na captura de tela acima, o objeto mostra um tamanho retido de 60. Acredito que a unidade seja bytes aqui.

Eu acabei de escrever isso para resolver um problema (ish) semelhante. Ele não faz exatamente o que você está procurando, ou seja, não leva em consideração como o intérprete armazena o objeto.

Mas, se você estiver usando o V8, ele deverá fornecer uma aproximação razoavelmente correta, pois as incríveis prototipagens e classes ocultas lambem a maior parte da 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 );
}

Às vezes eu uso isso para sinalizar objetos realmente grandes que podem estar indo para o cliente a partir do servidor. Não representa o espaço ocupado na memória. Ele fornece a você aproximadamente o custo de enviá-lo ou armazená-lo.

Observe também que é lento, apenas para desenvolvedores. Mas, para obter uma resposta aproximada com uma linha de código, isso tem sido útil para mim.

roughObjSize = JSON.stringify(bigObject).length;

Aqui está uma solução um pouco mais compacta para o 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);

Há um módulo NPM para obter o tamanho do objeto ; você pode instalá-lo comnpm 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 é um método hacky, mas eu tentei duas vezes com números diferentes e parece ser consistente.

O que você pode fazer é tentar alocar um grande número de objetos, como um ou dois milhões de objetos do tipo que você deseja. Coloque os objetos em uma matriz para impedir que o coletor de lixo os libere (observe que isso adicionará uma pequena sobrecarga de memória por causa da matriz, mas espero que isso não importe e, além disso, se você vai se preocupar com objetos que estão na memória , você as armazena em algum lugar). Adicione um alerta antes e depois da alocação e, em cada alerta, verifique quanta memória o processo do Firefox está consumindo. Antes de abrir a página com o teste, verifique se você tem uma nova instância do Firefox. Abra a página, observe o uso da memória após o alerta "antes" ser exibido. Feche o alerta, aguarde a memória ser alocada. Subtraia a nova memória da antiga e divida-a pela quantidade de alocações.

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

Eu tentei isso no meu computador e o processo tinha 48352K de memória quando o alerta "antes" foi exibido. Após a alocação, o Firefox tinha 440236K de memória. Para alocações de 2 milhões, isso é cerca de 200 bytes para cada objeto.

Tentei novamente com alocações de 1 milhão e o resultado foi semelhante: 196 bytes por objeto (suponho que os dados extras em 2mill foram usados ​​para Array).

Então, aqui está um método hacky que pode ajudá-lo. O JavaScript não fornece um método "sizeof" por um motivo: cada implementação de JavaScript é diferente. No Google Chrome, por exemplo, a mesma página usa cerca de 66 bytes para cada objeto (a julgar pelo gerenciador de tarefas, pelo menos).

Desculpe por não poder comentar, então continuo o trabalho de errado. Esta versão aprimorada não conta o objeto mais de uma vez, portanto, não há loop infinito. Além disso, acho que a chave de um objeto também deve ser contada, 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);

Tendo o mesmo problema. Eu pesquisei no Google e quero compartilhar com a comunidade stackoverflow esta solução.

Importante :

Eu usei a função compartilhada por Yan Qing no 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);

O que você acha disso?

Eu quero saber se meus esforços de redução de memória realmente ajudam na redução de memória

Na sequência deste comentário, eis o que você deve fazer: Tente produzir um problema de memória - escreva um código que crie todos esses objetos e aumente graudalmente o limite superior até encontrar um problema (falha do navegador, congelamento do navegador ou um problema de falta de armazenamento). erro de memória). Idealmente, você deve repetir esse experimento com diferentes navegadores e diferentes sistemas operacionais.

Agora, existem duas opções: opção 1 - Você não conseguiu produzir o problema de memória. Portanto, você está se preocupando por nada. Você não tem um problema de memória e seu programa está bom.

opção 2 - você teve um problema de memória. Agora, pergunte-se se o limite em que o problema ocorreu é razoável (em outras palavras: é provável que essa quantidade de objetos seja criada no uso normal do seu código). Se a resposta for 'Não', você está bem. Caso contrário, agora você sabe quantos objetos seu código pode criar. Retrabalhe o algoritmo de forma que ele não ultrapasse esse limite.

Se sua principal preocupação for o uso de memória da extensão do Firefox, sugiro que verifique com os desenvolvedores do Mozilla.

A Mozilla fornece em seu wiki uma lista de ferramentas para analisar vazamentos de memória .

Essa biblioteca Javascript sizeof.jsfaz a mesma coisa. Inclua assim

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

A função sizeof usa um objeto como parâmetro e retorna seu tamanho aproximado em bytes. Por exemplo:

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

A função sizeof pode manipular objetos que contêm várias referências a outros objetos e referências recursivas.

Publicado originalmente aqui .

As ferramentas de desenvolvedor do Chrome têm essa funcionalidade. Achei este artigo muito útil e faz exatamente o que você deseja: https://developers.google.com/chrome-developer-tools/docs/heap-profiling

Muito obrigado a todos que estiveram trabalhando no código para isso!

Eu só queria acrescentar que estava procurando exatamente a mesma coisa, mas no meu caso, é para gerenciar um cache de objetos processados ​​para evitar a necessidade de analisar e processar novamente objetos de chamadas ajax que podem ou não ter sido armazenadas em cache pelo navegador. Isso é especialmente útil para objetos que exigem muito processamento, geralmente qualquer coisa que não esteja no formato JSON, mas pode ficar muito caro manter essas coisas armazenadas em cache em um projeto grande ou em um aplicativo / extensão que permanece em execução por um longo período. Tempo.

De qualquer forma, eu 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
    },
};

É um exemplo simplista e pode ter alguns erros, mas dá a ideia, pois você pode usá-lo para segurar objetos estáticos (o conteúdo não muda) com algum grau de inteligência. Isso pode reduzir significativamente os requisitos de processamento caros que o objeto teve que ser produzido em primeiro 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;
}

Uso a guia Linha do tempo das ferramentas de desenvolvimento do Chrome , instanciamos quantidades cada vez maiores de objetos e obtenho boas estimativas como essa. Você pode usar html como este abaixo, como clichê, e modificá-lo para simular melhor as características de seus objetos (número e tipos de propriedades, etc ...). Você pode clicar no ícone da lixeira na parte inferior dessa guia de ferramentas de desenvolvimento, antes e depois de uma execução.

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

A instanciação de 2 milhões de objetos de apenas uma propriedade cada (como neste código acima) leva a um cálculo aproximado de 50 bytes por objeto, no meu Chromium, no momento. Alterar o código para criar uma sequência aleatória por objeto adiciona cerca de 30 bytes por objeto, etc. Espero que isso ajude.

Se você precisar verificar programaticamente por aprox. tamanho dos objetos, você também pode verificar esta biblioteca http://code.stephenmorley.org/javascript/finding-the-memory-usage-of-objects/ que pude usar para o tamanho dos objetos.

Caso contrário, sugiro usar o Chrome / Firefox Heap Profiler.

Eu acredito que você esqueceu de 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";
        }
    },

Eu sei isto não é absolutamente o caminho certo para fazê-lo, ainda it've me ajudou algumas vezes no passado para obter o tamanho aproximado arquivo objeto:

Escreva seu objeto / resposta no console ou em uma nova guia, copie os resultados para um novo arquivo de bloco de notas, salve-o e verifique o tamanho do arquivo. O arquivo do bloco de notas em si tem apenas alguns bytes; portanto, você terá um tamanho de arquivo de objeto bastante preciso.