Frontend Development: Trik JavaScript Efisien untuk Performa

Optimasi Performa JavaScript untuk Frontend

Efisiensi kode JavaScript adalah kunci utama dalam meningkatkan Core Web Vitals. Trik berikut berfokus pada pengurangan beban main thread dan manipulasi DOM yang cerdas untuk memastikan aplikasi web tetap responsif di berbagai perangkat.

1. Teknik Debounce dan Throttle

Untuk menangani event yang dipicu berulang kali seperti scroll atau resize, gunakan teknik debouncing atau throttling guna membatasi eksekusi fungsi.

// Debounce function
function debounce(func, delay) {
  let timeout;
  return (...args) => {
    clearTimeout(timeout);
    timeout = setTimeout(() => func.apply(this, args), delay);
  };
}

2. Manipulasi DOM dengan DocumentFragment

Menambahkan elemen ke DOM secara berulang akan memicu reflow yang mahal. Gunakan DocumentFragment untuk melakukan perubahan di memori sebelum menyuntikkannya ke DOM.

const fragment = document.createDocumentFragment();
for (let i = 0; i < 100; i++) {
  const li = document.createElement('li');
  li.textContent = `Item ${i}`;
  fragment.appendChild(li);
}
document.getElementById('list').appendChild(fragment);

3. Memanfaatkan Intersection Observer

Gunakan IntersectionObserver untuk lazy loading gambar atau memicu animasi saat elemen masuk ke dalam viewport, menggantikan event listener scroll yang berat.

4. Optimasi Asinkron dengan Async/Await

Hindari callback hell dengan menggunakan async/await yang dikombinasikan dengan Promise.all untuk menjalankan permintaan data secara paralel.

async function fetchData() {
  const [users, posts] = await Promise.all([
    fetch('/api/users').then(r => r.json()),
    fetch('/api/posts').then(r => r.json())
  ]);
  console.log(users, posts);
}

Tips Troubleshooting Lapangan

• Gunakan Chrome DevTools Performance Tab untuk mengidentifikasi long tasks.
• Hindari penggunaan eval() karena risiko keamanan dan performa.
• Gunakan const dan let secara disiplin untuk menghindari hoisting yang tidak terduga.
• Selalu bersihkan event listener saat komponen di-unmount untuk mencegah memory leak.