Làm thế nào để có được kích thước của một đối tượng JavaScript?

Tôi muốn biết kích thước chiếm bởi một đối tượng JavaScript.

Thực hiện chức năng sau:

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

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

Bây giờ tôi khởi tạo student :

var stud = new Student();

để tôi có thể làm những thứ như

stud.firstName = "new Firstname";

alert(stud.firstName);

stud.marks.maxMarks = 200;

Vân vân.

Bây giờ, stud đối tượng sẽ chiếm một số kích thước trong bộ nhớ. Nó có một số dữ liệu và nhiều đối tượng hơn.

Làm thế nào để tôi tìm ra bao nhiêu bộ nhớ mà studđối tượng chiếm? Một cái gì đó giống như mộtsizeof() trong JavaScript? Nó sẽ thực sự tuyệt vời nếu tôi có thể tìm thấy nó trong một cuộc gọi chức năng duy nhất như thế nào sizeof(stud).

Tôi đã tìm kiếm trên Internet hàng tháng trời không thể tìm thấy nó (được hỏi trong một vài diễn đàn mà không có câu trả lời).

Tôi đã tái xác nhận mã trong câu trả lời ban đầu của tôi . Tôi đã loại bỏ đệ quy và loại bỏ chi phí tồn tại giả định.

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 cho phép bạn kiểm tra việc sử dụng bộ nhớ đối tượng.

Bạn cần có khả năng xác định vị trí của đối tượng trong dấu vết có thể khó khăn. Nếu bạn ghim đối tượng vào Window toàn cầu, bạn có thể dễ dàng tìm thấy từ chế độ liệt kê "Ngăn chặn".

Trong ảnh chụp màn hình đính kèm, tôi đã tạo một đối tượng gọi là "testObj" trên cửa sổ. Sau đó tôi nằm trong hồ sơ (sau khi ghi) và nó hiển thị kích thước đầy đủ của đối tượng và mọi thứ trong đó dưới "kích thước giữ lại".

Thêm chi tiết về sự cố bộ nhớ .

Trong ảnh chụp màn hình ở trên, đối tượng hiển thị kích thước được giữ lại là 60. Tôi tin rằng đơn vị là byte ở đây.

Tôi chỉ viết điều này để giải quyết một vấn đề tương tự (ish). Nó không chính xác làm những gì bạn có thể đang tìm kiếm, tức là nó không tính đến cách trình thông dịch lưu trữ đối tượng.

Nhưng, nếu bạn đang sử dụng động cơ V8, nó sẽ cung cấp cho bạn một xấp xỉ khá ok vì các nguyên mẫu tuyệt vời và các lớp ẩn chiếm hầu hết các chi phí.

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

Đôi khi tôi sử dụng điều này để gắn cờ các đối tượng thực sự lớn có thể sẽ đến máy khách từ máy chủ. Nó không đại diện cho dấu chân trong bộ nhớ. Nó chỉ giúp bạn có được khoảng bao nhiêu chi phí để gửi nó, hoặc lưu trữ nó.

Cũng lưu ý, nó chậm, chỉ dev. Nhưng để có được câu trả lời trên sân bóng với một dòng mã, nó rất hữu ích cho tôi.

roughObjSize = JSON.stringify(bigObject).length;

Đây là một giải pháp nhỏ gọn hơn cho vấn đề:

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

Có một mô-đun NPM để lấy kích thước đối tượng , bạn có thể cài đặt nó vớinpm 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));

Đây là một phương pháp hacky, nhưng tôi đã thử nó hai lần với các số khác nhau và nó có vẻ phù hợp.

Những gì bạn có thể làm là thử và phân bổ một số lượng lớn các đối tượng, như một hoặc hai triệu đối tượng thuộc loại bạn muốn. Đặt các đối tượng trong một mảng để ngăn bộ thu gom rác phát hành chúng (lưu ý rằng điều này sẽ thêm một chút bộ nhớ vì mảng đó, nhưng tôi hy vọng điều này không quan trọng và bên cạnh đó nếu bạn lo lắng về các đối tượng nằm trong bộ nhớ , bạn lưu trữ chúng ở đâu đó). Thêm một cảnh báo trước và sau khi phân bổ và trong mỗi cảnh báo kiểm tra xem quá trình Firefox đang chiếm bao nhiêu bộ nhớ. Trước khi bạn mở trang bằng thử nghiệm, hãy đảm bảo bạn có một phiên bản Firefox mới. Mở trang, lưu ý sử dụng bộ nhớ sau khi cảnh báo "trước" được hiển thị. Đóng cảnh báo, chờ bộ nhớ được phân bổ. Trừ bộ nhớ mới từ bộ nhớ cũ và chia nó cho số lượng phân bổ.

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

Tôi đã thử điều này trong máy tính của mình và quá trình này có 48352K bộ nhớ khi cảnh báo "trước" được hiển thị. Sau khi phân bổ, Firefox có 440236K bộ nhớ. Đối với phân bổ 2 triệu, đây là khoảng 200 byte cho mỗi đối tượng.

Tôi đã thử lại lần nữa với phân bổ 1 triệu và kết quả tương tự: 196 byte cho mỗi đối tượng (tôi cho rằng dữ liệu bổ sung trong 2 mill đã được sử dụng cho Array).

Vì vậy, đây là một phương pháp hacky có thể giúp bạn. JavaScript không cung cấp phương thức "sizeof" vì một lý do: mỗi triển khai JavaScript là khác nhau. Ví dụ, trong Google Chrome, cùng một trang sử dụng khoảng 66 byte cho mỗi đối tượng (ít nhất là đánh giá từ trình quản lý tác vụ).

Xin lỗi tôi không thể nhận xét, vì vậy tôi chỉ tiếp tục công việc từ tomwrong. Phiên bản nâng cao này sẽ không đếm đối tượng nhiều hơn một lần, do đó không có vòng lặp vô hạn. Thêm vào đó, tôi cho rằng khóa của một đối tượng cũng nên được tính, đại khái.

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

Có cùng một vấn đề. Tôi đã tìm kiếm trên Google và tôi muốn chia sẻ với cộng đồng stackoverflow giải pháp này.

Quan trọng :

Tôi đã sử dụng chức năng được chia sẻ bởi Yan Qing trên github https://gist.github.com/undredh/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);

Bạn nghĩ gì về nó?

tôi muốn biết nếu những nỗ lực giảm trí nhớ của tôi thực sự giúp giảm trí nhớ

Theo dõi nhận xét này, đây là những gì bạn nên làm: Cố gắng tạo ra vấn đề về bộ nhớ - Viết mã tạo ra tất cả các đối tượng này và tăng giới hạn trên cho đến khi bạn gặp sự cố (Sự cố trình duyệt, Đóng băng trình duyệt hoặc Lỗi ngoài- lỗi bộ nhớ). Tốt nhất bạn nên lặp lại thử nghiệm này với các trình duyệt khác nhau và hệ điều hành khác nhau.

Bây giờ có hai tùy chọn: tùy chọn 1 - Bạn đã không thành công trong việc tạo ra vấn đề bộ nhớ. Do đó, bạn đang lo lắng không có gì. Bạn không có vấn đề về bộ nhớ và chương trình của bạn vẫn ổn.

tùy chọn 2- bạn đã có một vấn đề bộ nhớ. Bây giờ hãy tự hỏi liệu giới hạn mà sự cố xảy ra có hợp lý không (nói cách khác: có khả năng số lượng đối tượng này sẽ được tạo khi sử dụng mã thông thường của bạn không). Nếu câu trả lời là 'Không' thì bạn vẫn ổn. Nếu không, bây giờ bạn biết có bao nhiêu đối tượng mà mã của bạn có thể tạo. Làm lại thuật toán sao cho nó không vi phạm giới hạn này.

Nếu mối quan tâm chính của bạn là việc sử dụng bộ nhớ của tiện ích mở rộng Firefox, tôi khuyên bạn nên kiểm tra với các nhà phát triển Mozilla.

Mozilla cung cấp cho wiki của mình một danh sách các công cụ để phân tích rò rỉ bộ nhớ .

Thư viện Javascript sizeof.jsnày làm điều tương tự. Bao gồm nó như thế này

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

Hàm sizeof lấy một đối tượng làm tham số và trả về kích thước gần đúng của nó theo byte. Ví dụ:

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

Hàm sizeof có thể xử lý các đối tượng chứa nhiều tham chiếu đến các đối tượng khác và các tham chiếu đệ quy.

Ban đầu được xuất bản ở đây .

Các công cụ dành cho nhà phát triển Chrome có chức năng này. Tôi thấy bài viết này rất hữu ích và thực hiện chính xác những gì bạn muốn: https://developers.google.com/chrome-developer-tools/docs/heap-profiling

Rất cám ơn tất cả mọi người đã làm việc về mã cho việc này!

Tôi chỉ muốn nói thêm rằng tôi đã tìm kiếm chính xác điều tương tự, nhưng trong trường hợp của tôi, đó là quản lý bộ đệm của các đối tượng được xử lý để tránh phải phân tích lại và xử lý các đối tượng từ các cuộc gọi ajax có thể hoặc không được lưu vào bộ nhớ cache bởi trình duyệt. Điều này đặc biệt hữu ích cho các đối tượng cần xử lý nhiều, thường là bất kỳ thứ gì không có định dạng JSON, nhưng sẽ rất tốn kém khi giữ những thứ này được lưu trong một dự án lớn hoặc một ứng dụng / tiện ích mở rộng còn tồn tại lâu thời gian.

Dù sao, tôi sử dụng nó cho một cái gì đó như:

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

Đó là một ví dụ đơn giản và có thể có một số lỗi, nhưng nó đưa ra ý tưởng, vì bạn có thể sử dụng nó để giữ các đối tượng tĩnh (nội dung sẽ không thay đổi) với một mức độ thông minh nào đó. Điều này có thể cắt giảm đáng kể bất kỳ yêu cầu xử lý đắt tiền nào mà đối tượng phải được sản xuất ngay từ đầu.

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

Tôi sử dụng tab Dòng thời gian của công cụ phát triển Chrome , khởi tạo số lượng đối tượng ngày càng lớn và có được ước tính tốt như thế. Bạn có thể sử dụng html như thế này bên dưới, dưới dạng soạn sẵn và sửa đổi nó để mô phỏng tốt hơn các đặc điểm của các đối tượng của bạn (số lượng và loại thuộc tính, v.v ...). Bạn có thể muốn nhấp vào biểu tượng bit rác ở cuối tab công cụ dev đó, trước và sau khi chạy.

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

Khởi tạo 2 triệu đối tượng chỉ một thuộc tính (như trong mã này ở trên) dẫn đến tính toán sơ bộ 50 byte cho mỗi đối tượng, trên Chromium của tôi, ngay bây giờ. Thay đổi mã để tạo một chuỗi ngẫu nhiên cho mỗi đối tượng sẽ thêm khoảng 30 byte cho mỗi đối tượng, v.v Hy vọng điều này sẽ giúp ích.

Nếu bạn cần lập trình kiểm tra aprox. kích thước của các đối tượng bạn cũng có thể kiểm tra thư viện này http://code.stephenmorley.org/javascript/finding-the-memory-usage-of-objects/ mà tôi đã có thể sử dụng cho kích thước đối tượng.

Mặt khác, tôi đề nghị sử dụng Trình tạo Heap Chrome / Firefox.

Tôi tin rằng bạn đã quên bao gồm 'mảng'.

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

Tôi biết điều này hoàn toàn không phải là cách đúng đắn để làm điều đó, nhưng nó đã giúp tôi một vài lần trong quá khứ để có được kích thước tệp đối tượng xấp xỉ:

Viết đối tượng / phản hồi của bạn vào bàn điều khiển hoặc một tab mới, sao chép kết quả vào một tệp notepad mới, lưu nó và kiểm tra kích thước tệp. Bản thân tệp notepad chỉ là một vài byte, vì vậy bạn sẽ có được kích thước tệp đối tượng khá chính xác.