Detached DOM Elements ก่อให้เกิด Memory Leak ใน JavaScript

Detached DOM Elements และ Memory Leak

Detached DOM Elements คือ Element ที่ถูกลบออกจาก DOM Tree แล้ว แต่ยังถูก Reference โดย JavaScript Variable ทำให้ Garbage Collector ไม่สามารถเก็บขยะได้

สาเหตุหลัก

• DOM เป็น Tree Structure (Double-linked) Reference หนึ่งตัว = Reference ทั้ง Tree
• Variable/Closure/Event Listener ยังค้าง Reference ไว้
• Element ไม่ถูก GC แม้จะ detached แล้ว

ตัวอย่างปัญหา

<script>
  var example = document.createElement('p');
  example.id = 'someText';
  document.body.appendChild(example);
  
  var value = {
    text: document.getElementById('someText') // Reference ค้างอยู่
  };
  
  function createFun() {
    value.text.innerHTML = 'JavaScript is not Java';
  }
  
  function deleteFun() {
    document.body.removeChild(document.getElementById('someText'));
    // Element ถูกลบจาก DOM แต่ value.text ยัง Reference อยู่!
  }
  
  createFun();
  deleteFun();
  // 'someText' ยังอยู่ใน Memory (Detached DOM Tree)
</script>

วิธีแก้ไข (Best Practice)

<script>
  function createFun() {
    var example = document.createElement('p'); // Local Variable
    example.id = 'someText';
    document.body.appendChild(example);
    
    example.innerHTML = 'JavaScript is not Java';
    
    function deleteFun() {
      document.body.removeChild(example);
      // example ไป Out of Scope → GC สามารถเก็บได้
    }
    
    setTimeout(deleteFun, 5000);
  }
</script>

เครื่องมือตรวจสอบ

• Chrome DevTools → Memory Tab → Heap Snapshot → Filter "Detached"
• Performance Monitor → Detached DOM Count