Digital Transformation
Reflow (Layout Browser)
Reflow adalah proses browser menghitung ulang posisi dan ukuran elemen di halaman setelah ada perubahan DOM atau style, dan menjadi salah satu penyebab utama lag visual.
TL;DR: Reflow adalah proses browser menghitung ulang layout halaman setelah ada perubahan struktur atau style. Reflow yang sering dipicu animasi atau JavaScript yang manipulasi DOM tanpa hati-hati menjadi penyebab utama CLS tinggi dan halaman terasa berat. Mengurangi reflow adalah salah satu kunci performa frontend yang sehat.
Apa itu Reflow?
Reflow, kadang disebut layout, adalah tahap di rendering pipeline browser ketika engine menghitung ulang posisi setiap elemen di halaman. Reflow dipicu setiap kali ada perubahan yang memengaruhi geometri, misalnya menambah elemen, mengubah lebar, atau mengubah font.
Setiap reflow membutuhkan biaya komputasi. Untuk halaman kompleks dengan ratusan elemen, satu reflow saja bisa memakan 10 sampai 50 ms. Jika reflow dipicu berulang dalam satu animasi, total bisa cepat melewati anggaran INP dan membuat halaman terasa lag.
Pemicu Umum dan Cara Menghindarinya
| Pemicu | Penjelasan | Alternatif lebih ringan |
|---|---|---|
Mengubah width atau height via JS | Pemicu reflow penuh | Pakai transform: scale() |
Mengubah top, left untuk animasi | Pemicu reflow plus repaint | Pakai transform: translate() |
Membaca offsetHeight setelah menulis style | Memicu force layout | Batch baca-tulis dengan requestAnimationFrame |
| Insert banyak DOM dalam loop | Reflow per insert | Gunakan DocumentFragment |
Praktik standar di industri menganjurkan animasi memakai properti yang hanya memicu compositing, yaitu transform dan opacity. Lihat panduan web.dev tentang rendering performance.
Kenapa Penting?
Untuk website bisnis Indonesia yang banyak pengunjungnya memakai perangkat menengah ke bawah, biaya reflow terasa nyata. Halaman yang terlihat smooth di laptop developer bisa terasa patah-patah di Android entry-level. Mengurangi reflow lewat pemilihan properti CSS yang tepat membuat skor Core Web Vitals konsisten lebih baik di lapangan, bukan hanya di lab.
Pertanyaan Umum
Apakah setiap perubahan style memicu reflow?
Tidak semua. Perubahan color, background-color, atau visibility umumnya hanya memicu repaint, bukan reflow. Perubahan yang mengubah ukuran atau posisi hampir selalu memicu reflow.
Bagaimana cara mendeteksi reflow yang berlebihan?
Pakai panel Performance di Chrome DevTools, cari blok berwarna ungu yang menandakan layout. Banyak blok berurutan dalam satu frame menandakan layout thrashing yang bisa diperbaiki dengan batching.
Istilah Terkait