จะรับขนาดของวัตถุ 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 ช่วยให้คุณตรวจสอบการใช้หน่วยความจำวัตถุ

คุณต้องสามารถค้นหาวัตถุในการติดตามซึ่งอาจเป็นเรื่องยุ่งยาก หากคุณตรึงวัตถุไว้ที่หน้าต่างโกลบอลการค้นหาจากโหมดรายการ "บรรจุ" นั้นค่อนข้างง่าย

ในภาพหน้าจอที่แนบมาฉันสร้างวัตถุที่ชื่อว่า "testObj" บนหน้าต่าง จากนั้นฉันก็อยู่ใน profiler (หลังจากทำการบันทึก) และมันจะแสดงขนาดเต็มของวัตถุและทุกอย่างในนั้นภายใต้ "ขนาดคงที่"

รายละเอียดเพิ่มเติมเกี่ยวกับความผันผวนของหน่วยความจำ

ในภาพหน้าจอด้านบนวัตถุแสดงขนาดที่เก็บไว้ 60 ผมเชื่อว่าหน่วยเป็นไบต์ที่นี่

ฉันเพิ่งเขียนสิ่งนี้เพื่อแก้ปัญหาที่คล้ายกัน (ish) มันไม่ได้ทำสิ่งที่คุณกำลังมองหาอย่างแน่นอนเช่นมันไม่ได้คำนึงถึงวิธีที่ล่ามเก็บวัตถุ

แต่ถ้าคุณใช้ 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 );
}

บางครั้งฉันใช้สิ่งนี้เพื่อตั้งค่าสถานะวัตถุที่มีขนาดใหญ่มาก ๆ ที่อาจไปยังไคลเอนต์จากเซิร์ฟเวอร์ มันไม่ได้เป็นตัวแทนของหน่วยความจำในรอยเท้า เพียงแค่ทำให้คุณมีค่าใช้จ่ายในการส่งหรือเก็บไว้

ยังทราบว่ามันช้า dev เท่านั้น แต่สำหรับการได้คำตอบ ballpark ด้วยโค้ดหนึ่งบรรทัดมันมีประโยชน์สำหรับฉัน

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 เพื่อรับขนาดวัตถุคุณสามารถติดตั้งได้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 สำหรับอาร์เรย์)

ดังนั้นนี่คือวิธีการแฮ็กที่อาจช่วยคุณได้ 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 โซลูชันนี้

สำคัญ :

ฉันใช้ฟังก์ชั่นที่แบ่งปันโดย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);

คุณคิดยังไงกับเรื่องนี้?

ฉันต้องการทราบว่าความพยายามลดหน่วยความจำของฉันจริงช่วยในการลดหน่วยความจำ

ติดตามความคิดเห็นนี้ต่อไปนี้คือสิ่งที่คุณควรทำ: พยายามสร้างปัญหาหน่วยความจำ - เขียนรหัสที่สร้างวัตถุเหล่านี้ทั้งหมดและเพิ่มขีด จำกัด สูงสุดอย่างไม่น่าเชื่อจนกว่าคุณจะพบปัญหา (เบราว์เซอร์ขัดข้องเบราว์เซอร์หยุดทำงาน หน่วยความจำผิดพลาด) เป็นการดีที่คุณควรทำซ้ำการทดสอบนี้กับเบราว์เซอร์ที่แตกต่างกันและระบบปฏิบัติการที่แตกต่างกัน

ขณะนี้มีสองตัวเลือก: ตัวเลือก 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;
}

ฉันใช้แท็บไทม์ไลน์ของเครื่องมือ dev ของ Chrome ยกตัวอย่างวัตถุจำนวนมากขึ้นและรับการประมาณที่ดีเช่นนั้น คุณสามารถใช้ html แบบนี้ด้านล่างเป็นสำเร็จรูปและปรับเปลี่ยนเพื่อจำลองลักษณะของวัตถุของคุณได้ดีขึ้น (จำนวนและประเภทของคุณสมบัติ ฯลฯ ... ) คุณอาจต้องการคลิกที่ไอคอนถังขยะที่ด้านล่างของแท็บเครื่องมือ dev นั้นก่อนและหลังการทำงาน

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

ฉันรู้นี่ไม่ใช่วิธีที่ถูกต้องในการทำสิ่งนี้ แต่มันได้ช่วยฉันสองสามครั้งในอดีตที่จะได้ขนาดวัตถุโดยประมาณ:

เขียนวัตถุ / การตอบสนองของคุณไปยังคอนโซลหรือแท็บใหม่คัดลอกผลลัพธ์ไปยังไฟล์แผ่นจดบันทึกใหม่บันทึกและตรวจสอบขนาดไฟล์ ไฟล์ notepad นั้นมีขนาดเพียงไม่กี่ไบต์ดังนั้นคุณจะได้ขนาดวัตถุไฟล์ที่ถูกต้องพอสมควร