องค์ประกอบ Dom ที่แยกออกมา
องค์ประกอบ DOM ที่แยกออกมาเป็นองค์ประกอบที่ถูกลบออกจาก DOM แล้ว แต่หน่วยความจำยังคงอยู่เนื่องจาก JavaScript ซึ่งหมายความว่าตราบใดที่องค์ประกอบมีการอ้างอิงถึงตัวแปรหรืออ็อบเจ็กต์ใดๆ ก็ตาม จะไม่เก็บขยะแม้หลังจากถูกทำลายจาก DOM แล้ว
DOM เป็นเหมือนต้นไม้ที่มีการเชื่อมโยงสองทาง ซึ่งหมายความว่าการอ้างอิงไปยังโหนดในต้นไม้จะหยุดต้นไม้ทั้งหมดจากการรวบรวมขยะ
มาดูตัวอย่างการสร้างองค์ประกอบ DOM ในจาวาสคริปต์ หลังจากสร้างองค์ประกอบแล้ว ให้ทำลายมัน แต่ลืมลบตัวแปรที่ถือไว้ ภาพจำลองนี้นำไปสู่ Detached DOM ซึ่งไม่เพียงแต่อ้างอิงไปยังองค์ประกอบ DOM เท่านั้น แต่ยังรวมถึงโครงสร้างทั้งหมดด้วย
ตัวอย่าง
ในตัวอย่างต่อไปนี้ แม้ว่าจะถูกลบออกจาก DOM แล้ว 'someText' จะยังคงมีการอ้างอิงในอ็อบเจ็กต์ 'value' ส่วนกลาง นี่คือสาเหตุที่ไม่สามารถลบออกจากตัวรวบรวมขยะและใช้หน่วยความจำต่อไปได้ ซึ่งทำให้หน่วยความจำรั่ว
<html>
<body>
<script>
var example = document.createElement("p");
example.id = "someText";
document.body.appendChild(example);
var value = {
text: document.getElementById('someText')
};
function createFun() {
value.text.innerHTML = "Javascript is not Java";
}
createFun();
function deleteFun() {
document.body.removeChild(document.getElementById('someText'));
}
deleteFun();
</script>
</body>
</html> หลีกเลี่ยงหน่วยความจำรั่ว
เพื่อหลีกเลี่ยงการรั่วไหลของหน่วยความจำ แนวปฏิบัติที่ดีที่สุดคือใส่ตัวอย่าง var ไว้ในตัวฟัง ซึ่งทำให้เป็นตัวแปรในเครื่อง เมื่อตัวอย่าง var ถูกลบ พาธสำหรับอ็อบเจ็กต์จะถูกตัดออก ทำให้ตัวรวบรวมขยะปล่อยหน่วยความจำ
