Rumah  >  Artikel  >  Apakah css reflow dan redraw

Apakah css reflow dan redraw

尊渡假赌尊渡假赌尊渡假赌
尊渡假赌尊渡假赌尊渡假赌asal
2023-10-18 10:02:441395semak imbas

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.

Apakah css reflow dan redraw

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!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn