Proses di mana browser menghitung ulang posisi dan geometri elemen halaman untuk merender ulang sebagian atau seluruh halaman disebut reflow. Karena reflow adalah operasi pemblokiran pengguna di browser, penting untuk memahami cara mengurangi jumlah reflow dan bagaimana atribut dokumen yang berbeda (kedalaman DOM, efisiensi CSS, perubahan gaya tanpa jenis) mempengaruhi jumlah reflow sangat diperlukan bagi pengembang. Terkadang sebuah elemen di halaman perubahan posisi akan mengubah elemen induknya (Anotasi: jamak di sini) dan semua elemen turunannya.
Ada berbagai operasi pengguna dan perubahan DHTML yang dapat memicu perubahan posisi. Menyesuaikan ukuran jendela browser, menggunakan javascript untuk menghitung gaya ( gaya yang dihitung ), membuat dan menghapus elemen di DOM, dan mengubah kelas elemen akan memicu reflow. Perlu dicatat bahwa beberapa operasi akan memicu reflow berkali-kali, di luar imajinasi Anda. Gambar berikut dari pidato Steve Souders " Situs Web Lebih Cepat ":
Dari tabel di atas, jelas bahwa tidak semua gaya yang dikontrol JavaScript memicu reflow di semua browser, dan meskipun dipicu, frekuensinya tidak sama. Pada saat yang sama, terlihat bahwa browser modern menjadi semakin baik dalam mengontrol jumlah perubahan posisi.
Di Google, kami mengukur kecepatan laman dan aplikasi web dengan berbagai cara, dan perubahan posisi adalah faktor utama yang kami pertimbangkan saat menambahkan UI. Kami berusaha keras untuk memberikan pengalaman pengguna yang hidup, interaktif, dan menyenangkan.
pada prinsipnya
Berikut adalah beberapa prinsip untuk mengurangi reflow:
Dalam video di bawah ini (Anotasi: Dikutip dari YouTube, tidak dapat dilihat, silakan buka teks asli untuk melewati dinding), Lindsey memperkenalkan beberapa metode untuk mengurangi reflow.
Bacaan lebih lanjut
Terjemahan asli: http://www.99css.com/2009/06/minimizing-browser-reflow.html