Apakah css reflow dan redraw

Aliran semula dan lukis semula dalam CSS merujuk kepada dua peringkat yang menyebabkan penyemak imbas mengira semula dan memaparkan halaman apabila saiz, kedudukan, warna dan atribut lain unsur berubah dalam penyemak imbas Disebabkan aliran semula dan lukis semula, Lukisan memerlukan penyemak imbas untuk mengira semula dan membuat halaman, jadi mereka akan membawa kerugian prestasi Oleh itu, semasa menulis kod, anda harus cuba mengelakkan aliran semula dan lukisan semula yang kerap.

Sistem pengendalian tutorial ini: sistem Windows 10, komputer Dell G3.

Dalam penyemak imbas, apabila kita menukar saiz, kedudukan, warna dan lain-lain sesuatu elemen, ia akan menyebabkan penyemak imbas mengira semula dan memaparkan halaman. Antaranya, dua peringkat ini dipanggil CSS reflow (reflow) dan repaint (repaint).

Pengalir semula CSS bermakna apabila saiz, reka letak atau kedudukan elemen DOM berubah, penyemak imbas perlu mengira semula sifat geometri elemen dan membina semula pepohon pemaparan halaman. Aliran semula pasti akan menyebabkan lukis semula, tetapi lukis semula tidak semestinya akan mencetuskan aliran semula.

Css redraw bermakna apabila perubahan gaya elemen tidak menjejaskan reka letak, penyemak imbas hanya perlu melukis semula elemen tanpa mengira semula susun atur. Sebagai contoh, menukar warna elemen hanya akan menyebabkan lukisan semula dan tidak akan mencetuskan aliran semula.

Memandangkan kedua-dua reflow dan redraw memerlukan penyemak imbas untuk mengira semula dan memaparkan halaman, mereka akan membawa kerugian prestasi. Oleh itu, semasa menulis kod, anda harus cuba mengelakkan aliran semula dan lukisan semula yang kerap Anda boleh mengambil langkah pengoptimuman berikut:

1. Elakkan pengubahsuaian gaya DOM yang kerap.
2. Gunakan transformasi untuk menggantikan operasi atas/kiri dan lain-lain yang menyebabkan pengaliran semula.
3. Gunakan serpihan dokumen (DocumentFragment) untuk melaksanakan operasi DOM, dan akhirnya tambahkannya pada dokumen sekaligus.
4. Elakkan menggunakan ungkapan CSS kerana ia menyebabkan penyemak imbas mengira semula setiap kali.
5. Elakkan kerap membaca maklumat susun atur atau menggunakan atribut seperti siri offset, yang akan memaksa penyemak imbas mengalir semula.

Ringkasnya, menulis kod dengan betul dan mengurangkan operasi aliran semula dan lukis semula boleh meningkatkan prestasi halaman dan pengalaman pengguna.

Atas ialah kandungan terperinci Apakah css reflow dan redraw. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!