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ヒーププロファイラーを使用すると、オブジェクトメモリの使用状況を検査できます。

トレースでオブジェクトを見つけられるようにする必要がありますが、これは注意が必要です。オブジェクトをウィンドウグローバルに固定すると、「包含」リストモードから簡単に見つけることができます。

添付のスクリーンショットでは、ウィンドウに「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 );
}

これを使用して、サーバーからクライアントに送信される可能性のある非常に大きなオブジェクトにフラグを設定する場合があります。メモリ内のフットプリントを表すものではありません。それはそれを送るか、それを保管するのにかかるおよその費用をあなたにちょうど与えます。

また、それは遅い、開発のみです。しかし、1行のコードで大まかな答えを得るには、それが役に立ちました。

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

オブジェクトsizeofを取得するNPMモジュールがあり、次のようにインストールできます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));

これはハックな方法ですが、異なる数値で2回試しましたが、一貫しているようです。

あなたができることは、あなたが望む種類の100万または200万のオブジェクトのような膨大な数のオブジェクトを試し、割り当てることです。オブジェクトを配列に入れて、ガベージコレクターがオブジェクトを解放しないようにします（これにより、配列が原因でメモリオーバーヘッドが少し増えることに注意してください。ただし、オブジェクトがメモリ内にあることを心配する場合は、問題にならないことを願っています、どこかに保存します）。割り当ての前後にアラートを追加し、各アラートでFirefoxプロセスが使用しているメモリ量を確認します。テストでページを開く前に、新しいFirefoxインスタンスがあることを確認してください。ページを開き、「before」アラートが表示された後のメモリ使用量を確認します。アラートを閉じ、メモリが割り当てられるのを待ちます。古いメモリから新しいメモリを差し引き、割り当て量で割ります。

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でした。200万の割り当ての場合、これはオブジェクトごとに約200バイトです。

100万の割り当てでもう一度試したところ、結果は同様でした。オブジェクトごとに196バイトです（2ミルの余分なデータが配列に使用されたと思います）。

だから、ここにあなたを助けるかもしれないハックな方法があります。JavaScriptには、理由のために「sizeof」メソッドが用意されていません。JavaScriptの実装はそれぞれ異なります。たとえばGoogle Chromeでは、同じページが各オブジェクトに約66バイトを使用します（少なくともタスクマネージャから判断すると）。

コメントできなかったので、tomwrongから作業を続行します。この拡張バージョンでは、オブジェクトが2回以上カウントされないため、無限ループは発生しません。さらに、オブジェクトのキーも大まかにカウントする必要があります。

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でYan Qingが共有する機能を使用しました

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

あなたはそれについてどう思いますか？

私のメモリ削減の取り組みが実際にメモリの削減に役立つかどうかを知りたい

このコメントのフォローアップは次のとおりです。メモリの問題を生成する-これらのすべてのオブジェクトを作成するコードを記述し、問題が発生するまで（ブラウザーのクラッシュ、ブラウザーのフリーズ、またはOut-Of-）、上限を徐々に増やしますメモリエラー）。理想的には、異なるブラウザと異なるオペレーティングシステムでこの実験を繰り返す必要があります。

現在、2つのオプションがあります。オプション1-メモリの問題を生成できませんでした。したがって、あなたは何も心配していません。メモリの問題はなく、プログラムは正常です。

オプション2-メモリの問題が発生しました。ここで、問題が発生した制限が妥当であるかどうかを自問してください（つまり、この量のオブジェクトが通常のコードの使用時に作成される可能性が高いですか）。答えが「いいえ」の場合は、問題ありません。そうでなければ、コードで作成できるオブジェクトの数がわかります。この制限に違反しないようにアルゴリズムを作り直してください。

Firefox拡張機能のメモリ使用量が主な懸念事項である場合は、Mozilla開発者に確認することをお勧めします。

Mozillaは、Wikiでメモリリークを分析するためのツールのリストを提供しています。

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

私はChrome開発ツールの[タイムライン]タブを使用して、ますます大量のオブジェクトをインスタンス化し、そのような適切な見積もりを取得しています。以下のような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>

（上記のこのコードのように）プロパティが1つだけの200万のオブジェクトをインスタンス化すると、私のChromiumでは、オブジェクトごとに50バイトの概算になります。オブジェクトごとにランダムな文字列を作成するようにコードを変更すると、オブジェクトごとに約30バイトが追加されます。これが役に立てば幸いです。

プログラムでaproxをチェックする必要がある場合。オブジェクトのサイズこのライブラリhttp://code.stephenmorley.org/javascript/finding-the-memory-usage-of-objects/をチェックして、オブジェクトのサイズに使用することもできます。

それ以外の場合は、Chrome / Firefoxヒーププロファイラを使用することをお勧めします。

「配列」を含めるのを忘れたと思います。

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

知ってる、これは絶対にそれを行うには正しい方法ではありません、まだit'veは約オブジェクト・ファイルのサイズを取得するには、過去に私に数回を助けました：

オブジェクトまたは応答をコンソールまたは新しいタブに書き込み、結果を新しいメモ帳ファイルにコピーして保存し、ファイルサイズを確認します。メモ帳ファイル自体は数バイトなので、かなり正確なオブジェクトファイルサイズが得られます。