Pelajari cara mengurangi jumlah reflows

• Teks Asli: Meminimalkan Browser Reflow
• Penulis: Lindsey Simon
• Terjemahan: Ytzong

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.

Berikut adalah beberapa prinsip untuk mengurangi reflow:

1. Kurangi kedalaman DOM yang tidak perlu. Mengubah level di pohon DOM akan menyebabkan perubahan di semua tingkatan, dari akar ke node anak dari node yang diubah. Ini menghasilkan banyak waktu yang dihabiskan untuk menjalankan reflow.
2. Minimalkan aturan CSS dan hapus CSS yang tidak digunakan.
3. Jika Anda melakukan perubahan representasi yang kompleks, seperti animasi, biarkan keluar dari aliran dokumen. Diselesaikan dengan penentuan posisi absolut atau posisi tetap.
4. Hindari pemilih CSS kompleks yang tidak perlu, terutama pemilih keturunan, karena akan mengkonsumsi lebih banyak CPU untuk mencocokkan pemilih.

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.

• Catatan Mozilla tentang HTML Reflow
• pengecatan ulang dan mencerminkan
• Satoshi Ueyama Contoh Debugging Reflow di Firefox (Demo Debug-Firefox Satoshi Ueyama Demo Reflow):
  • google.co.jp reflow
  • mozilla.org reflow
  • JA.Wikipedia.org Reflow
• Nicole Sullivan pada reflows dan mengecat ulang