Як отримати розмір об’єкта JavaScript?

Я хочу знати розмір, який займає об’єкт JavaScript.

Виконайте таку функцію:

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

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

Тепер я інстанціюю student:

var stud = new Student();

так що я можу робити такі речі

stud.firstName = "new Firstname";

alert(stud.firstName);

stud.marks.maxMarks = 200;

тощо.

Тепер studоб’єкт буде займати деякий розмір в пам'яті. У ньому є деякі дані та більше об’єктів.

Як дізнатися, скільки пам’яті studзаймає об’єкт? Щось схоже на sizeof()JavaScript? Це було б справді дивовижно, якби я міг знайти це в одному виклику функції, як sizeof(stud).

Я шукав в Інтернеті місяцями - не міг його знайти (запитували на кількох форумах - відповідей не було).

Я повторно ознайомив з кодом у своїй оригінальній відповіді . Я видалив рекурсію і видалив передбачуване існування накладних витрат.

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 дозволяє вам перевірити використання об’єктної пам'яті.

Вам потрібно вміти знаходити об’єкт у сліді, який може бути складним. Якщо ви зафіксуєте об'єкт у глобальному вікні, його легко знайти в режимі лістингу "Containment".

На доданому скріншоті я створив об’єкт під назвою "testObj" у вікні. Потім я розміщуюсь у профіле (після запису) і він показує повний розмір об'єкта і все, що знаходиться в ньому, під "нерозмірним розміром".

Детальніше про поломки пам'яті .

На наведеному вище скріншоті об'єкт показує збережений розмір 60. Я вважаю, що одиниця тут є байтами.

Я щойно написав це, щоб вирішити подібну проблему. Він не відповідає саме тому, що ви можете шукати, тобто не враховує, як інтерпретатор зберігає об'єкт.

Але, якщо ви використовуєте V8, це повинно дати вам цілком нормальне наближення, оскільки дивовижне прототипування та приховані класи вилизують більшу частину накладних витрат.

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

Іноді я використовую це для позначення дійсно великих об'єктів, які можуть надходити до клієнта з сервера. Він не відображає слід пам'яті. Він просто отримує приблизно те, що коштувало б надіслати або зберегти.

Також зауважте, що це повільно, лише розробник. Але для отримання відповіді на тему з одним рядком коду мені це було корисно.

roughObjSize = JSON.stringify(bigObject).length;

Ось дещо компактніше рішення проблеми:

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

Існує модуль NPM, щоб отримати розмір об'єктаof , ви можете встановити йогоnpm 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));

Це гакітний метод, але я спробував його двічі з різними цифрами, і, здається, він відповідає.

Що ви можете зробити, це спробувати виділити величезну кількість об'єктів, як-от один або два мільйони об'єктів, які ви хочете. Помістіть об’єкти в масив, щоб перешкоджати видачі сміттєзбірника (зверніть увагу, що це додасть невелику накладну пам’ять через масив, але я сподіваюся, що це не має значення, і, крім того, якщо ви будете турбуватися про те, що об’єкти знаходяться в пам'яті , ви їх десь зберігаєте). Додайте попередження до та після розподілу та в кожному попередженні перевіряйте, скільки пам'яті займає процес Firefox. Перш ніж відкрити сторінку з тестом, переконайтеся, що у вас є свіжий екземпляр Firefox. Відкрийте сторінку, зверніть увагу на використання пам'яті після появи попередження "до". Закрийте сповіщення, зачекайте, поки буде виділено пам'ять. Відняти нову пам’ять від старшої та розділити її на кількість виділень.

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

Я спробував це на своєму комп’ютері, і процес мав 48352K пам'яті, коли було показано попередження "до". Після виділення Firefox мав 440236K пам'яті. Для 2 мільйонів виділень, це приблизно 200 байт на кожен об'єкт.

Я спробував це ще раз з 1 мільйонами виділень, і результат був подібний: 196 байт на об'єкт (я вважаю, додаткові дані в 2mill використовувались для Array).

Отже, ось прискіпливий метод, який може вам допомогти. JavaScript не дає методу "sizeof" з причини: кожна реалізація JavaScript відрізняється. Наприклад, в Google Chrome на одній і тій же сторінці використовується близько 66 байт для кожного об’єкта (судячи з принаймні менеджера завдань).

Вибачте, що не зміг прокоментувати, тому я просто продовжую роботу з tomwrong. Ця розширена версія не буде рахувати об'єкт більше одного разу, таким чином, не існує нескінченного циклу. Плюс, я вважаю, що ключ об'єкта також повинен бути підрахований, приблизно.

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

З тією ж проблемою. Я шукав у Google, і хочу поділитися з спільнотою stackoverflow цим рішенням.

Важливо :

Я використав функцію, якою поділився Ян Цін на 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);

Що ви думаєте про це?

я хочу знати, чи дійсно мої зусилля щодо зменшення пам’яті допомагають зменшити пам’ять

Слідкуючи за цим коментарем, ось що вам слід зробити: Спробуйте створити проблему з пам’яттю - Напишіть код, який створює всі ці об’єкти, і грайдально збільшуйте верхню межу, поки ви не зіткнетеся з проблемою (Збій браузера, заморозка браузера або вихід із-за- помилка пам'яті). В ідеалі слід повторити цей експеримент із різними браузерами та різною операційною системою.

Зараз є два варіанти: варіант 1 - Вам не вдалося створити проблему з пам'яттю. Отже, ви нічого не турбуєтесь. У вас немає проблеми з пам'яттю, і ваша програма прекрасна.

варіант 2 - у вас виникла проблема з пам'яттю. Тепер запитайте себе, чи розумна межа, з якою виникла проблема (іншими словами: чи ймовірно, що ця кількість об'єктів буде створена при нормальному використанні вашого коду). Якщо відповідь «Ні», то ви все добре. Інакше тепер ви знаєте, скільки об’єктів може створити ваш код. Переробіть алгоритм таким чином, щоб він не порушив цю межу.

Якщо ваша головна проблема - використання пам’яті вашого розширення Firefox, пропоную звернутися до розробників Mozilla.

Mozilla надає на своїй вікі список інструментів для аналізу витоків пам'яті .

Ця бібліотека Javascript sizeof.jsробить те саме. Включіть це так

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

Функція sizeof приймає об’єкт як параметр і повертає його приблизний розмір у байтах. Наприклад:

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

Функція sizeof може обробляти об'єкти, які містять кілька посилань на інші об'єкти та рекурсивні посилання.

Спочатку опубліковано тут .

Інструменти для розробників Chrome мають цю функціональність. Я вважаю цю статтю дуже корисною і робить саме те, що ви хочете: https://developers.google.com/chrome-developer-tools/docs/heap-profiling

Дякую всім, хто працював над цим кодом!

Я просто хотів додати, що я шукав саме те саме, але в моєму випадку це управління кешем оброблюваних об'єктів, щоб уникнути необхідності повторного розбору та обробки об’єктів з викликів ajax, які можуть бути або не можуть бути кешовані за допомогою браузера. Це особливо корисно для об'єктів, для яких потрібна велика обробка, як правило, все, що не у форматі JSON, але це може коштувати дуже дорого, щоб зберегти кеш цих речей у великому проекті або додатку / розширенні, яке довго працюватиме час.

У всякому разі, я використовую це для чогось такого типу:

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

Це спрощений приклад і може мати деякі помилки, але він дає ідею, оскільки ви можете використовувати його для тримання на статичних об'єктах (вміст не зміниться) з певною мірою інтелекту. Це може суттєво зменшити будь-які дорогі вимоги до обробки, які об'єкт повинен був виготовити в першу чергу.

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

Я використовую вкладку Тимчасова шкала інструментів для розробників , інстанціюю все більшу кількість об'єктів і отримую такі хороші оцінки. Ви можете використовувати HTML, подібний до цього, як котлован, і модифікувати його, щоб краще моделювати характеристики ваших об'єктів (кількість та типи властивостей тощо). Ви можете натиснути піктограму біт сміття в нижній частині вкладки інструментів розробника до та після запуску.

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

Ініціалізація 2 мільйонів об'єктів лише однієї властивості (як у цьому коді вище) призводить до приблизного обчислення 50 байтів на об'єкт у моєму Chromium зараз. Зміна коду для створення випадкового рядка на об'єкт додає приблизно 30 байт на об'єкт тощо. Сподіваюся, це допоможе.

Якщо вам потрібно систематично перевірити наявність aprox. розмір об'єктів, ви також можете перевірити цю бібліотеку http://code.stephenmorley.org/javascript/finding-the-memory-usage-of-objects/ яку я зміг використовувати для розміру об'єктів.

В іншому випадку я пропоную використовувати Chrome / Firefox Heap Profiler.

Я вважаю, ви забули включити "масив".

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

Я знаю це абсолютно не правильний спосіб зробити це, але це мені кілька разів допомагало в минулому отримати розмір файлу приблизного об'єкта:

Напишіть свій об’єкт / відповідь на консоль або нову вкладку, скопіюйте результати в новий файл блокнота, збережіть його та перевірте розмір файлу. Сам файл блокнота - це лише кілька байт, тому ви отримаєте досить точний розмір об'єктного файлу.