ฉันได้สร้างกรณีทดสอบง่ายๆที่สร้างมุมมอง Backbone แนบตัวจัดการกับเหตุการณ์และสร้างคลาสที่ผู้ใช้กำหนดเอง ฉันเชื่อว่าด้วยการคลิกปุ่ม "ลบ" ในตัวอย่างนี้ทุกอย่างจะถูกล้างและไม่ควรมีหน่วยความจำรั่ว
jsfiddle สำหรับโค้ดอยู่ที่นี่: http://jsfiddle.net/4QhR2/
// scope everything to a function
function main() {
function MyWrapper() {
this.element = null;
}
MyWrapper.prototype.set = function(elem) {
this.element = elem;
}
MyWrapper.prototype.get = function() {
return this.element;
}
var MyView = Backbone.View.extend({
tagName : "div",
id : "view",
events : {
"click #button" : "onButton",
},
initialize : function(options) {
// done for demo purposes only, should be using templates
this.html_text = "<input type='text' id='textbox' /><button id='button'>Remove</button>";
this.listenTo(this,"all",function(){console.log("Event: "+arguments[0]);});
},
render : function() {
this.$el.html(this.html_text);
this.wrapper = new MyWrapper();
this.wrapper.set(this.$("#textbox"));
this.wrapper.get().val("placeholder");
return this;
},
onButton : function() {
// assume this gets .remove() called on subviews (if they existed)
this.trigger("cleanup");
this.remove();
}
});
var view = new MyView();
$("#content").append(view.render().el);
}
main();อย่างไรก็ตามฉันไม่แน่ใจว่าจะใช้ผู้สร้างโปรไฟล์ของ Google Chrome ได้อย่างไรเพื่อตรวจสอบว่าเป็นจริงในกรณีนี้ มีสิ่งหนึ่งล้านล้านที่ปรากฏบนสแนปชอตของผู้สร้างฮีปและฉันไม่รู้ว่าจะถอดรหัสดีหรือไม่ดีได้อย่างไร บทเรียนที่ฉันได้เห็นจนถึงตอนนี้ก็แค่บอกให้ฉัน "ใช้สแน็ปช็อตโปรไฟล์" หรือให้รายละเอียดอย่างละเอียดเกี่ยวกับการทำงานของโปรไฟล์ทั้งหมด เป็นไปได้หรือไม่ที่จะใช้ profiler เป็นเครื่องมือหรือฉันต้องเข้าใจจริงๆว่าทุกอย่างถูกออกแบบมาอย่างไร?
แก้ไข:บทแนะนำเช่นนี้:
การแก้ไขการรั่วไหลของหน่วยความจำ Gmail
เป็นตัวแทนของวัสดุที่แข็งแรงกว่าจากที่ฉันเคยเห็น อย่างไรก็ตามนอกเหนือจากการแนะนำแนวคิดของ3 Snapshot Techniqueฉันพบว่าพวกเขามีความรู้เชิงปฏิบัติน้อยมาก (สำหรับผู้เริ่มต้นอย่างฉัน) บทแนะนำ 'การใช้ DevTools' ไม่ทำงานผ่านตัวอย่างจริงดังนั้นคำอธิบายที่คลุมเครือและแนวคิดทั่วไปเกี่ยวกับสิ่งต่าง ๆ จึงไม่เป็นประโยชน์มากนัก สำหรับตัวอย่าง 'Gmail':
ดังนั้นคุณพบการรั่วไหล ตอนนี้คืออะไร
ตรวจสอบเส้นทางการยึดของวัตถุที่รั่วไหลในครึ่งล่างของพาเนลโปรไฟล์
หากไซต์การจัดสรรไม่สามารถอนุมานได้ง่าย (เช่นผู้ฟังเหตุการณ์):
จัดทำเครื่องมือสร้างของวัตถุการเก็บรักษาผ่านคอนโซล JS เพื่อบันทึกการติดตามสแต็กสำหรับการจัดสรร
ใช้ปิดหรือไม่ เปิดใช้งานการตั้งค่าสถานะที่มีอยู่ที่เหมาะสม (เช่น goog.events.Listener.ENABLE_MONITORING) เพื่อตั้งค่าคุณสมบัติ creationStack ในระหว่างการก่อสร้าง
ฉันพบว่าตัวเองสับสนมากขึ้นหลังจากอ่านแล้วไม่น้อย และอีกครั้งมันเป็นเพียงแค่บอกให้ฉันทำสิ่งที่ไม่ว่าจะทำพวกเขา จากมุมมองของฉันข้อมูลทั้งหมดที่ออกมามีความคลุมเครือเกินไปหรือไม่เหมาะสมกับคนที่เข้าใจกระบวนการนี้อยู่แล้ว
ประเด็นที่เฉพาะเจาะจงเหล่านี้บางอย่างได้รับการหยิบยกขึ้นมาในคำตอบของ @Jonathan Naguinด้านล่าง
main10,000 ครั้งแทนที่จะเป็นหนึ่งครั้งและดูว่าคุณใช้หน่วยความจำที่เหลืออีกมากในตอนท้ายหรือไม่
