BAB 35 — Memory Management & Performance: Mengoptimalkan JavaScript untuk Kecepatan dan Efisiensi

BAB 35 — Memory Management & Performance: Mengoptimalkan JavaScript untuk Kecepatan dan Efisiensi

Menguasai memory management dan performance optimization adalah kunci bagi developer JavaScript yang ingin membangun aplikasi responsif, scalable, dan bebas memory leaks.

Bab ini membahas garbage collection, WeakMap & WeakSet, profiling, optimisasi loop & DOM, serta event delegation & throttling.

1. Garbage Collection (GC) & Memory Leaks

JavaScript secara otomatis melakukan garbage collection (GC), yaitu proses membuang objek yang tidak lagi digunakan untuk membebaskan memori.

let obj = { name: "Alice" };
obj = null; // Objek "Alice" siap di-GC

Penyebab Memory Leak

  • Global variables yang tidak dibersihkan
  • Closures yang menyimpan referensi besar
  • DOM references yang tidak dihapus
  • Timers & intervals yang tidak dibersihkan

Tips mencegah memory leak:

const interval = setInterval(() => console.log("Running..."), 1000);
// Jangan lupa clear interval saat tidak dibutuhkan
clearInterval(interval);

2. WeakMap & WeakSet

WeakMap dan WeakSet menyimpan objek secara weak reference, sehingga tidak mencegah garbage collection.

// WeakMap
const wm = new WeakMap();
let obj = {};
wm.set(obj, "meta data");

console.log(wm.get(obj)); // meta data

obj = null; // Objek bisa di-GC otomatis

// WeakSet
const ws = new WeakSet();
let user = { name: "Bob" };
ws.add(user);
user = null; // Bisa di-GC

Manfaat:

  • Menghindari memory leak
  • Cocok untuk menyimpan data metadata objek
  • Tidak enumerable → lebih aman untuk internal storage

3. Profiling JS Performance

Profiling membantu menemukan bottleneck dan optimasi.

Browser DevTools:

  • Performance tab → merekam timeline eksekusi
  • Memory tab → cek snapshot memory, menemukan memory leaks
  • Coverage tab → menemukan kode yang tidak dipakai

Tips:

  • Fokus pada re-rendering DOM yang sering
  • Hati-hati dengan nested loops dan callback heavy

4. Optimizing Loops & DOM Updates

Optimasi Loops

  • Gunakan for klasik untuk performa tinggi di loop besar
  • Hindari penghitungan panjang array setiap iterasi
  • Gunakan map/filter/reduce untuk clean code, tapi perhatikan performa
// Hindari menghitung arr.length di setiap iterasi
for (let i = 0, len = arr.length; i < len; i++) {
  console.log(arr[i]);
}

Optimasi DOM Updates

  • Batch DOM updates → ubah fragment di memory, baru append ke DOM
  • Gunakan document fragment untuk manipulasi banyak elemen
const fragment = document.createDocumentFragment();
for (let i = 0; i < 100; i++) {
  const div = document.createElement('div');
  div.textContent = `Item ${i}`;
  fragment.appendChild(div);
}
document.body.appendChild(fragment); // Hanya satu reflow

5. Event Delegation & Throttling

Event Delegation

Alih-alih menambahkan event listener ke banyak elemen, tambahkan listener ke parent.

document.querySelector('#list').addEventListener('click', (e) => {
  if (e.target.tagName === 'LI') {
    console.log(`Clicked ${e.target.textContent}`);
  }
});

Manfaat:

  • Mengurangi memory usage
  • Lebih efisien untuk elemen dinamis

Throttling

Mengontrol frekuensi eksekusi event untuk mengurangi beban CPU:

function throttle(fn, limit) {
  let inThrottle;
  return function(...args) {
    if (!inThrottle) {
      fn.apply(this, args);
      inThrottle = true;
      setTimeout(() => inThrottle = false, limit);
    }
  };
}

window.addEventListener('scroll', throttle(() => {
  console.log('Scroll fired!');
}, 200));

Kesimpulan

Bab ini membekali kamu dengan teknik memory management & performance optimization untuk membuat aplikasi JavaScript:

  • Memahami garbage collection & menghindari memory leaks
  • Memanfaatkan WeakMap & WeakSet untuk data metadata
  • Profiling dengan DevTools untuk menemukan bottleneck
  • Optimasi loops & batch DOM updates untuk performa tinggi
  • Event delegation & throttling untuk event-heavy aplikasi

Dengan menguasai pola ini, aplikasi kamu akan lebih cepat, hemat memori, dan scalable, siap menangani real-time dan high-performance scenarios.

Related Posts