如何获取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 );
}

有时，我用它来标记可能从服务器发送到客户端的非常大的对象。它不代表内存占用量。它只是使您大致了解发送或存储它的成本。

还要注意，它很慢，仅适用于开发人员。但是对于用一行代码来获得一个标准答案来说，这对我来说很有用。

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模块来获取对象sizeof，您可以使用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的内存。对于200万个分配，每个对象大约200个字节。

我再次尝试了100万次分配，结果很相似：每个对象196个字节（我假设2mill中的额外数据用于数组）。

因此，这是一种可以帮助您的hacky方法。JavaScript不提供“ sizeof”方法是有原因的：每个JavaScript实现都不相同。例如，在Google Chrome浏览器中，同一页面为每个对象使用大约66个字节（至少从任务管理器判断）。

对不起，我无法发表评论，所以我从错误的角度继续工作。此增强版本不会对对象计数一次以上，因此不会造成无限循环。另外，我认为应该大致算出对象的键。

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社区分享此解决方案。

重要事项：

我使用了Yan Qing在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);

你怎么看待这件事？

我想知道我减少记忆的努力是否真的有助于减少记忆

在此评论之后，您应该执行以下操作：尝试产生内存问题-编写创建所有这些对象并逐渐增加上限的代码，直到遇到问题（浏览器崩溃，浏览器冻结或Out-Of-Of）。内存错误）。理想情况下，您应该使用不同的浏览器和不同的操作系统重复此实验。

现在有两个选项：选项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>

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

我知道这绝对不是正确的方法，但是过去它已经帮助我几次来获得大约目标文件的大小：

将对象/响应写入控制台或新选项卡，将结果复制到新的记事本文件，保存并检查文件大小。记事本文件本身只有几个字节，因此您将获得相当准确的目标文件大小。