การอัปเดต DOM ผ่าน Javascript ทำให้หน่วยความจำรั่ว (เฉพาะใน Firefox เท่านั้น)

ฉันรู้ว่ามีคนถามคำถามนี้มาก่อน แต่ดูเหมือนจะไม่มีคำตอบใดที่สามารถแก้ไขปัญหาได้ ฉันกำลังทดสอบหน้าเว็บ AJAX ซึ่งอัปเดตองค์ประกอบใน DOM ผ่าน javascript

ทุกนาที เซิร์ฟเวอร์จะถูกสอบถามข้อมูลใหม่และ DOM จะได้รับการอัปเดตตามนั้น จากสิ่งที่ฉันบอกได้ การใช้หน่วยความจำสำหรับหน้านี้ใน Chrome เพิ่มขึ้น แต่ก็ไม่ได้มากเกินไป (เริ่มต้นประมาณ 40 MB และอาจถึงสูงสุด 80 MB) อย่างไรก็ตาม ใน Firefox การใช้หน่วยความจำเริ่มต้นที่ประมาณ 120 MB และสามารถขยายได้ถึง 400 MB ฉันได้ลองใช้ Javascript ด้วย Firebug แล้ว และดูเหมือนว่าหน่วยความจำจะขยายมากที่สุดเมื่อ DOM ได้รับการอัปเดตผ่านวิธี Javascript ของฉัน

การจัดการ DOM นั้นง่ายดาย เช่น:

var myTable = document.createElement("table");

var thead = document.createElement("thead");
var tr = document.createElement("tr");
var th = document.createElement("th");
th.appendChild(document.createTextNode("column1"));
tr.appendChild(th);

for(var test in obj.testObjs){
    th = document.createElement("th");
    th.appendChild(document.createTextNode(obj.testObjs[test].myVar));
    tr.appendChild(th);
}

ก่อนที่จะผนวกข้อมูลใหม่เข้ากับโหนดใน DOM ฉันจะต้องล้างข้อมูลที่มีอยู่ก่อน ฉันได้ลองหลายวิธี รวมถึงสิ่งที่อธิบายไว้ที่นี่: อย่างไร หากต้องการลบองค์ประกอบ DOM โดยไม่มีหน่วยความจำรั่ว

พร้อมทั้งวิธีง่ายๆ เช่น:

function clearChildren(node){
    if(node != null){
        while (node.hasChildNodes()) node.removeChild(node.firstChild);
    }
}

ฉันได้อ่านด้วย ( การเพิ่ม/การลบแบบวน ของโหนด DOM ทำให้หน่วยความจำรั่วใน JavaScript? ) ที่เบราว์เซอร์เริ่มรวบรวมขยะเมื่อถึงระดับหนึ่งเท่านั้น? สามารถยืนยันได้หรือไม่? ฉันรู้สึกว่าพีซีของฉันทำงานช้าหลังจากผ่านไประยะหนึ่งเนื่องจากหน่วยความจำที่เพิ่มขึ้น

ฉันรู้สึกว่าต้องมีวิธีแก้ปัญหานี้ เนื่องจากไซต์เชิงพาณิชย์ที่ฉันทดสอบว่าทำตามขั้นตอนการทำงานเดียวกันนั้นไม่ทำให้การใช้หน่วยความจำเพิ่มขึ้น

ความช่วยเหลือใด ๆ ที่จะได้รับการชื่นชมอย่างมาก.

ขอบคุณ


person user172092    schedule 25.06.2011    source แหล่งที่มา


คำตอบ (2)


innerHTML=''

เป็นวิธีที่ผิดในการเตรียมตัวแปรสำหรับการจัดการ GC
คุณต้องใช้ฟังก์ชัน delete บนองค์ประกอบและทุกองค์ประกอบที่องค์ประกอบนี้อ้างอิงถึง
เยอะมากใช่ไหม
นั่นคือเหตุผลที่เรามีไลบรารี JS ที่เขียนไว้สำหรับเรา ฉันตรวจสอบโค้ดใน Mootools แล้ว (ดาวน์โหลดและค้นหา destroy) และดูเหมือนว่าฉันจะเขียนถูกต้อง
ฉันเดาว่ามันคงจะเหมือนกันในไลบรารีอื่นๆ เช่นกัน

person Itay Moav -Malimovka    schedule 25.06.2011
comment
ขอบคุณสำหรับการตอบกลับ - Mootools รบกวน JQuery หรือไม่ ฉันใช้ JQuery บนไซต์ของฉัน และเมื่อพยายามใช้ฟังก์ชัน Mootools destroy() ฉันได้รับข้อผิดพลาด JS แจ้งว่า destroy() ไม่ใช่ฟังก์ชัน - person user172092; 29.06.2011
comment
คุณต้องตั้งค่าอย่างถูกต้องจึงจะเล่นด้วยกันได้ (ในเว็บไซต์ของฉันมันทำได้ดีมาก) เช่น แทนที่จะใช้ $ ในโค้ดที่ขึ้นอยู่กับ Mootools คุณต้องใช้ document.id('selectors...') - person Itay Moav -Malimovka; 30.06.2011
comment
ขอบคุณ ดูเหมือนว่าการใช้หน่วยความจำจะไม่เพิ่มขึ้นอย่างต่อเนื่องในขณะนี้ และฉันก็เห็นว่ามันลดลงในบางครั้ง ฉันขอขอบคุณความช่วยเหลือของคุณ - person user172092; 01.07.2011

สามารถยืนยันได้หรือไม่?

มันขึ้นอยู่กับ.

โดยทั่วไปแล้ว เบราว์เซอร์จะ GC เมื่อพวกเขารู้สึกเช่นนั้น และพฤติกรรมสามารถเปลี่ยนแปลงได้ค่อนข้างบ่อย ฉันสงสัยว่าหากคุณลองใช้ Firefox ทุกคืน คุณจะเห็นพฤติกรรมที่แตกต่างจากที่คุณอธิบายไว้ข้างต้น มีการเปลี่ยนแปลงพฤติกรรม GC อย่างน้อย 2 ครั้งนับตั้งแต่เปิดตัว Firefox 5

person Boris Zbarsky    schedule 29.06.2011
comment
ตอนนี้เราเป็น FF เวอร์ชั่นไหนแล้ว? ฉันหลงทาง - person Itay Moav -Malimovka; 30.06.2011
comment
Firefox 5 เป็นเวอร์ชันเสถียรในปัจจุบัน 6 มีกำหนดกลางเดือนสิงหาคม - person Boris Zbarsky; 30.06.2011