Untuk menanamkan kembali bagian atau seluruh halaman, proses penghitungan ulang lokasi elemen halaman dan geometri disebut reflow. Karena Reflow adalah operasi pemblokiran pengguna di browser, sangat penting bagi pengembang untuk memahami cara mengurangi jumlah reflows dan dampak dari berbagai atribut dokumen (kedalaman DOM, efisiensi CSS, dan tidak ada jenis perubahan gaya) pada jumlah reflows. Terkadang satu elemen di halaman reflow akan mencerminkan elemen induknya dan semua elemen anak.
Ada beberapa tindakan pengguna dan perubahan DHTML yang dapat memicu reflow. Ubah mengubah jendela browser, gunakan JavaScript untuk menghitung gaya, membuat elemen hapus di DOM, dan mengubah kelas elemen akan memicu reflow. Perlu dicatat bahwa beberapa operasi akan memicu reflow beberapa kali, di luar imajinasi Anda. Gambar berikut berasal dari pidato Steve Souders yang bahkan lebih cepat situs web:
Jelas dari tabel di atas bahwa tidak semua gaya yang dikendalikan JavaScript memicu reflow di semua browser, bahkan jika jumlah pemicu dipicu berbeda. Pada saat yang sama, dapat dilihat bahwa browser modern melakukan lebih baik dan lebih baik dalam mengendalikan jumlah reflows.
Di Google, kami mengukur halaman dan aplikasi web kami dalam banyak hal, dan reflow adalah faktor kunci yang kami pertimbangkan saat menambahkan UI. Kami berkomitmen untuk menyampaikan pengalaman pengguna yang hidup, interaktif, dan menyenangkan.
pada prinsipnyaBerikut adalah beberapa prinsip untuk mengurangi reflow:
Dalam video di bawah ini (catatan terjemahan: dikutip dari YouTube, tidak dapat dilihat, silakan buka teks asli untuk menelusuri dinding), Lindsey memperkenalkan beberapa cara untuk mengurangi reflow.
Bacaan lebih lanjut