Bagaimana cara mendapatkan ukuran objek JavaScript?

Saya ingin tahu ukuran yang ditempati oleh objek JavaScript.

Ambil fungsi berikut:

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

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

Sekarang saya instantiate student:

var stud = new Student();

sehingga saya bisa melakukan hal-hal seperti

stud.firstName = "new Firstname";

alert(stud.firstName);

stud.marks.maxMarks = 200;

dll.

Sekarang, studobjek akan menempati beberapa ukuran dalam memori. Ini memiliki beberapa data dan lebih banyak objek.

Bagaimana cara mengetahui berapa banyak memori yang studditempati objek? Sesuatu seperti sizeof()di JavaScript? Akan sangat luar biasa jika saya bisa mengetahuinya dalam satu panggilan fungsi saja sizeof(stud).

Saya telah mencari di Internet selama berbulan-bulan - tidak dapat menemukannya (diminta di beberapa forum - tidak ada balasan).

Saya telah memfaktorkan ulang kode dalam jawaban asli saya . Saya telah menghapus rekursi dan menghapus keberadaan yang ada di atas.

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 memungkinkan Anda memeriksa penggunaan memori objek.

Anda harus dapat menemukan objek dalam jejak yang bisa rumit. Jika Anda menyematkan objek ke Window global, cukup mudah untuk menemukan dari mode listing "Containment".

Pada tangkapan layar terlampir, saya membuat objek yang disebut "testObj" di jendela. Saya kemudian terletak di profiler (setelah membuat rekaman) dan itu menunjukkan ukuran penuh objek dan semua yang ada di bawah "ukuran dipertahankan".

Rincian lebih lanjut tentang kerusakan memori .

Pada tangkapan layar di atas, objek menunjukkan ukuran tetap 60. Saya percaya unit ini byte di sini.

Saya baru saja menulis ini untuk memecahkan masalah yang serupa. Itu tidak persis melakukan apa yang Anda cari, yaitu tidak memperhitungkan bagaimana penerjemah menyimpan objek.

Tapi, jika Anda menggunakan V8, itu akan memberi Anda perkiraan yang cukup ok karena prototipe yang mengagumkan dan kelas tersembunyi menjilat sebagian besar overhead.

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

Kadang-kadang saya menggunakan ini untuk menandai objek yang sangat besar yang mungkin pergi ke klien dari server. Itu tidak mewakili jejak memori. Itu hanya memberi Anda kira-kira berapa biaya untuk mengirimnya, atau menyimpannya.

Juga perhatikan, lambat, hanya dev. Tetapi untuk mendapatkan jawaban kasar dengan satu baris kode itu bermanfaat bagi saya.

roughObjSize = JSON.stringify(bigObject).length;

Inilah solusi yang sedikit lebih ringkas untuk masalah ini:

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

Ada modul NPM untuk mendapatkan ukuran objek , Anda dapat menginstalnyanpm 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));

Ini adalah metode hacky, tetapi saya mencobanya dua kali dengan angka yang berbeda dan tampaknya konsisten.

Yang dapat Anda lakukan adalah mencoba dan mengalokasikan sejumlah besar objek, seperti satu atau dua juta objek dari jenis yang Anda inginkan. Letakkan objek dalam array untuk mencegah pengumpul sampah melepaskannya (perhatikan bahwa ini akan menambah sedikit overhead memori karena array, tetapi saya harap ini tidak masalah dan selain itu jika Anda akan khawatir tentang objek yang ada di memori , Anda menyimpannya di suatu tempat). Tambahkan lansiran sebelum dan sesudah alokasi dan di setiap lansiran periksa berapa banyak memori yang diambil oleh proses Firefox. Sebelum Anda membuka halaman dengan tes, pastikan Anda memiliki contoh Firefox baru. Buka halaman, catat penggunaan memori setelah peringatan "sebelum" ditampilkan. Tutup peringatan, tunggu memori dialokasikan. Kurangi memori baru dari yang lebih lama dan bagi dengan jumlah alokasi.

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

Saya mencoba ini di komputer saya dan proses memiliki memori 48352K ketika peringatan "sebelum" ditampilkan. Setelah alokasi, Firefox memiliki memori 440236K. Untuk alokasi 2 juta, ini adalah sekitar 200 byte untuk setiap objek.

Saya mencobanya lagi dengan alokasi 1 juta dan hasilnya serupa: 196 byte per objek (saya kira data tambahan dalam 2mill digunakan untuk Array).

Jadi, inilah metode hacky yang mungkin bisa membantu Anda. JavaScript tidak menyediakan metode "sizeof" karena suatu alasan: setiap implementasi JavaScript berbeda. Di Google Chrome misalnya, halaman yang sama menggunakan sekitar 66 byte untuk setiap objek (setidaknya dilihat dari task manager).

Maaf saya tidak bisa berkomentar, jadi saya hanya melanjutkan pekerjaan dari tomwrong. Versi yang disempurnakan ini tidak akan menghitung objek lebih dari sekali, sehingga tidak ada loop tanpa batas. Plus, saya rasa kunci dari suatu objek juga harus dihitung, kira-kira.

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

Memiliki masalah yang sama. Saya mencari di Google dan saya ingin berbagi dengan komunitas stackoverflow solusi ini.

Penting :

Saya menggunakan fungsi yang dibagikan oleh Yan Qing di 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);

Apa yang Anda pikirkan?

saya ingin tahu apakah upaya pengurangan memori saya benar-benar membantu mengurangi memori

Menindaklanjuti komentar ini, inilah yang harus Anda lakukan: Cobalah untuk menghasilkan masalah memori - Tulis kode yang membuat semua objek ini dan secara besar meningkatkan batas atas hingga Anda mengalami masalah (Peramban peramban, Pembekuan peramban, atau Di luar- kesalahan memori). Idealnya Anda harus mengulang percobaan ini dengan browser yang berbeda dan sistem operasi yang berbeda.

Sekarang ada dua opsi: opsi 1 - Anda tidak berhasil menghasilkan masalah memori. Karenanya, Anda tidak perlu khawatir. Anda tidak memiliki masalah memori dan program Anda baik-baik saja.

opsi 2- Anda memang mendapatkan masalah memori. Sekarang tanyakan pada diri Anda apakah batas di mana masalah terjadi masuk akal (dengan kata lain: apakah mungkin jumlah objek ini akan dibuat pada penggunaan normal kode Anda). Jika jawabannya 'Tidak' maka Anda baik-baik saja. Kalau tidak, Anda sekarang tahu berapa banyak objek yang dapat dibuat oleh kode Anda. Mengolah algoritma sedemikian rupa sehingga tidak melanggar batas ini.

Jika masalah utama Anda adalah penggunaan memori ekstensi Firefox Anda, saya sarankan untuk memeriksa dengan pengembang Mozilla.

Mozilla memberikan daftar alat untuk menganalisis kebocoran memori pada wiki-nya .

Pustaka Javascript ini sizeof.jsmelakukan hal yang sama. Sertakan seperti ini

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

Fungsi sizeof mengambil objek sebagai parameter dan mengembalikan ukuran perkiraannya dalam byte. Sebagai contoh:

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

Fungsi sizeof dapat menangani objek yang berisi banyak referensi ke objek lain dan referensi rekursif.

Awalnya diterbitkan di sini .

Alat pengembang Chrome memiliki fungsi ini. Saya menemukan artikel ini sangat membantu dan melakukan persis seperti yang Anda inginkan: https://developers.google.com/chrome-developer-tools/docs/heap-profiling

Terima kasih banyak kepada semua orang yang telah mengerjakan kode untuk ini!

Saya hanya ingin menambahkan bahwa saya telah mencari hal yang persis sama, tetapi dalam kasus saya ini adalah untuk mengelola cache objek yang diproses untuk menghindari keharusan mem-parsing dan memproses objek dari panggilan ajax yang mungkin atau mungkin belum di-cache oleh browser. Ini sangat berguna untuk objek yang membutuhkan banyak pemrosesan, biasanya segala sesuatu yang tidak dalam format JSON, tetapi bisa sangat mahal untuk menyimpan hal-hal ini dalam cache dalam proyek besar atau aplikasi / ekstensi yang dibiarkan berjalan untuk waktu yang lama waktu.

Bagaimanapun, saya menggunakannya untuk sesuatu seperti:

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

Ini adalah contoh sederhana dan mungkin memiliki beberapa kesalahan, tetapi memberikan ide, karena Anda dapat menggunakannya untuk memegang objek statis (konten tidak akan berubah) dengan tingkat kecerdasan tertentu. Hal ini dapat secara signifikan mengurangi persyaratan pemrosesan yang mahal yang harus dilakukan oleh objek.

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

Saya menggunakan tab Timeline alat dev Chrome , instantiate objek dalam jumlah yang semakin besar, dan mendapatkan perkiraan yang baik seperti itu. Anda dapat menggunakan html seperti ini di bawah ini, sebagai boilerplate, dan memodifikasinya untuk lebih mensimulasikan karakteristik objek Anda (jumlah dan jenis properti, dll ...). Anda mungkin ingin mengeklik ikon bit sampah di bagian bawah tab alat dev, sebelum dan sesudah menjalankan.

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

Instantiasi 2 juta objek masing-masing hanya satu properti (seperti dalam kode ini di atas) mengarah ke perhitungan kasar 50 byte per objek, pada Chromium saya, sekarang. Mengubah kode untuk membuat string acak per objek menambahkan sekitar 30 byte per objek, dll. Semoga ini bisa membantu.

Jika Anda perlu secara sistematis memeriksa aprox. ukuran objek Anda juga dapat memeriksa perpustakaan ini http://code.stephenmorley.org/javascript/finding-the-memory-usage-of-objects/ yang saya dapat gunakan untuk ukuran objek.

Kalau tidak, saya sarankan untuk menggunakan Profiler Chrome / Firefox Heap.

Saya yakin Anda lupa memasukkan '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";
        }
    },

Saya tahu ini sama sekali bukan cara yang tepat untuk melakukannya, namun ini telah membantu saya beberapa kali di masa lalu untuk mendapatkan ukuran file objek kira-kira:

Tulis objek / respons Anda ke konsol atau tab baru, salin hasilnya ke file notepad baru, simpan, dan periksa ukuran file. File notepad itu sendiri hanya beberapa byte, sehingga Anda akan mendapatkan ukuran file objek yang cukup akurat.