7 Bottleneck JavaScript Tersembunyi dan Cara Mengatasinya

𝟩 𝗕𝗼𝘁𝘁𝗹𝗲𝗻𝗲𝗰𝗸 𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁 𝗧𝗲𝗿𝘀𝗲𝗯𝘂𝗻𝘆𝗶 𝗱𝗮𝗻 𝗖𝗮𝗿𝗮 𝗠𝗲𝗻𝗴𝗮𝘁𝗮𝘀𝗶𝗻𝘆𝗮

Aplikasi web yang lambat jarang sekali gagal karena algoritma yang buruk. Mereka gagal karena cara kode Anda berkomunikasi dengan browser.

Saya memprofil 300 aplikasi produksi. 73% masalah performa berasal dari 7 sumber ini.

1. Layout thrashing Ini terjadi saat Anda membaca sebuah properti, menulis ke DOM, lalu membacanya kembali. Hal ini memaksa browser untuk menghitung ulang layout secara berulang-ulang.

• Perbaikan: Lakukan batching untuk semua pembacaan terlebih dahulu. Kemudian lakukan batching untuk semua penulisan menggunakan requestAnimationFrame.

2. Unbounded event listeners Menambahkan event listener tanpa menghapusnya akan menyebabkan kebocoran memori (memory leaks). Ini adalah masalah utama pada single-page apps.

• Perbaikan: Gunakan AbortController untuk membersihkan listener saat komponen unmount.

3. Synchronous DOM reads in loops Membaca offsetWidth atau getBoundingClientRect di dalam loop memicu reflow yang terus-menerus.

• Perbaikan: Simpan (cache) nilai layout ke dalam variabel sebelum Anda memulai loop.

4. Missing requestAnimationFrame batching Perubahan DOM secara langsung pada event scroll atau resize terjadi terlalu sering. Hal ini menyebabkan jank.

• Perbaikan: Gunakan variabel ticking dan requestAnimationFrame untuk menyinkronkan pembaruan dengan siklus paint.

5. Large JSON.parse payloads Melakukan parsing file besar akan memblokir main thread. Hal ini menyebabkan input lag.

• Perbaikan: Gunakan Web Workers untuk melakukan parsing data di luar main thread.

6. Complex CSS selector matching Selector yang bersarang dalam (deeply nested) atau kompleks memperlambat kalkulasi ulang gaya (style recalculations).

• Perbaikan: Gunakan Lighthouse untuk menemukan layout shifts dan sederhanakan selector Anda.

7. Duplicate bundle chunks Bundle yang besar dan tidak teroptimasi membuang-buang waktu transfer.

• Perbaikan: Gunakan webpack-bundle-analyzer untuk menemukan dan menghapus kode duplikat.

Cara mengukur kemajuan Anda:

• Buka Chrome DevTools.
• Buka tab Performance.
• Rekam sesi selama 5 detik.
• Cari tugas yang lebih lama dari 50ms pada Main flame chart.
• Terapkan satu perbaikan dan bandingkan waktu Rendering dan Painting.

Memperbaiki area-area ini akan meningkatkan Core Web Vitals Anda, khususnya Largest Contentful Paint dan Interaction to Next Paint.

Sumber: https://dev.to/kui_luo/how-to-find-and-fix-7-hidden-performance-bottlenecks-in-your-javascript-code-ek5