Memory Leaks ใน JavaScript: สาเหตุหลักและการป้องกัน

Memory Leaks ใน JavaScript

JavaScript เป็น Garbage Collected Language จัดสรร Memory อัตโนมัติ แต่ Leak เกิดจาก Reference ที่ค้างอยู่ ทำให้ GC ไม่เก็บได้

สาเหตุหลัก 4 ข้อ

1. Accidental Global Variables

function foo() {
  bar = 'hello'; // ไม่มี var/let/const → Global Variable!
}
foo();
console.log(window.bar); // 'hello' - ค้างอยู่ตลอดอายุ Page

แก้: ใช้ 'use strict' หรือ ประกาศตัวแปรให้ครบ

2. Closures

var theThing = null;
function replaceThing() {
  var originalThing = theThing;
  var unused = function() { if (originalThing) console.log('hi'); };
  theThing = {
    longStr: new Array(1000000).join('*'),
    someMethod: function() { console.log('something'); }
  };
}
setInterval(replaceThing, 1000); // Memory เติบโตเรื่อยๆ!

สาเหตุ: unused Capture originalThing → theThing Chain ค้างทั้ง Chain

แก้: originalThing = null หลังใช้, หรือ Refactor ให้ไม่ Capture

3. Forgotten Timers/Callbacks

var data = getData();
setInterval(function() {
  // ใช้ data...
}, 1000);
// data ไม่ถูก GC จน Timer Clear

แก้: clearInterval(timer) เมื่อไม่ต้องการแล้ว

4. Detached DOM / Event Listeners

var element = document.getElementById('btn');
element.addEventListener('click', handler);
element.parentNode.removeChild(element);
// element ยังมี Listener → ไม่ถูก GC

แก้: element.removeEventListener('click', handler) ก่อน Remove

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

• Chrome DevTools → Memory → Heap Snapshot / Allocation Timeline
• Performance Monitor → JS Heap Size