Saya telah membaca banyak pertanyaan tentang reflow baru-baru ini, tetapi saya tidak memperhatikan fenomena ini sebelumnya. Baru-baru ini, saya mulai mempelajarinya secara perlahan, lagipula, saya tidak memperhatikan banyak detail kinerja di masa lalu. Mengenai reflow, secara sederhana dapat dikatakan bahwa ini adalah rendering DOM (menghitung ukuran, tata letak, dll. dari setiap objek di pohon dokumen melalui CSS atau faktor lainnya. Penjelasannya mungkin sepihak, tetapi pertama-tama tentukan a konsep sederhana untuk memudahkan pemahaman.
Pertama, saya melihat urutan penulisan atribut CSS yang direkomendasikan di Mozilla Artikel ini didasarkan pada informasi. Urutan penulisan ini bukan hanya karena standar spesifikasi kode pengembangan proyek, tetapi juga karena urutan penulisan yang wajar lebih sesuai dengan dengan. urutan rendering browser.
Gaya Dasar mozilla.org
* dikelola oleh fantasiai
* (kelas ditentukan dalam Panduan Markup -http://mozilla.org/contribute/writing/markup)
*/
/* Urutan yang disarankan:
//menampilkan properti
*menampilkan
*gaya daftar
* posisi
* mengambang
*jernih
//Atribut diri
*lebar
*tinggi
* batas
*lapisan
* perbatasan
* latar belakang
//Atribut teks
* warna
*font
* dekorasi teks
* perataan teks
*penjajaran vertikal
*ruang putih
* teks lainnya
* konten
"Visual Reflow" ini dengan jelas menunjukkan proses rendering browser. Dari situ Anda dapat melihat bahwa browser tidak menempatkan semua DOM dengan benar dalam satu langkah selama proses pemuatan setelah perhitungan konstan, yang mencakup dampak js, css, dll. pada kinerja dom.