Digital Transformation
Layout Thrashing
TL;DR: Layout thrashing terjadi ketika JavaScript berulang kali membaca lalu mengubah properti tata letak elemen (seperti lebar atau posisi) dalam satu siklus, memaksa browser menghitung ulang layout berkali-kali. Hasilnya animasi patah-patah dan interaksi terasa lambat.
Apa itu Layout Thrashing?
Browser bekerja paling efisien jika semua pembacaan tata letak dilakukan sekaligus, lalu semua perubahan diterapkan sekaligus. Layout thrashing memutus pola ini: kode membaca offsetHeight, mengubah style, membaca lagi, mengubah lagi. Setiap pembacaan setelah perubahan memaksa browser melakukan reflow sinkron, yaitu menghitung ulang posisi semua elemen sebelum melanjutkan.
Analoginya seperti mengukur ruangan, memindahkan satu kursi, mengukur ulang seluruh ruangan, memindahkan satu kursi lagi, dan begitu seterusnya. Padahal Anda bisa mengukur sekali, lalu menata semua kursi. Masalah ini sering muncul saat memanipulasi banyak elemen dalam loop, dan menambah beban main thread.
Cara Mengenali dan Memperbaiki
| Gejala | Perbaikan |
|---|---|
| Loop yang baca lalu tulis style | Pisahkan: baca semua dulu, tulis semua kemudian |
Animasi pakai top/left | Ganti ke transform agar tidak memicu reflow |
Akses offsetWidth dalam loop | Cache nilainya di luar loop |
| Banyak DOM update beruntun | Gunakan requestAnimationFrame untuk batch |
Kenapa Penting?
Layout thrashing adalah salah satu penyebab tersembunyi INP yang buruk, karena reflow sinkron menahan main thread tepat saat pengguna mengetuk atau menggulir. Untuk website bisnis dengan banyak komponen interaktif, satu loop yang salah pola bisa membuat halaman terasa berat di perangkat menengah ke bawah, yang merupakan mayoritas pengguna di Indonesia. Prinsip perbaikannya satu: kelompokkan semua operasi baca, lalu kelompokkan semua operasi tulis, jangan diselang-seling.
Pertanyaan Umum
Apa beda layout thrashing dengan render-blocking?
Render-blocking menunda halaman mulai tampil. Layout thrashing terjadi setelah halaman tampil, saat interaksi memicu perhitungan ulang tata letak berlebihan.
Tools apa untuk mendeteksinya?
Panel Performance di Chrome DevTools menandai "Forced reflow" dengan ikon peringatan, lengkap dengan baris kode pemicunya.
Istilah Terkait