Mana yang lebih baik, reflow atau redraw?

Melukis semula lebih cekap daripada mengalir semula. Jika operasi pengaliran semula yang kerap boleh dielakkan, prestasi halaman akan dipertingkatkan, kerana pengaliran semula adalah operasi yang agak memakan prestasi kerana ia akan menyebabkan keseluruhan pepohon pemaparan dibina semula, manakala lukisan semula hanya memerlukan elemen lukisan semula ke halaman, dan Tidak. perlu mengira semula susun atur.

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

Alir semula dan mengecat semula ialah dua proses penting apabila penyemak imbas memaparkan halaman.

Reflow merujuk kepada proses di mana penyemak imbas perlu mengira semula reka letak elemen dan melukis semula halaman apabila saiz, kedudukan dan lain-lain elemen DOM berubah. Reflow ialah operasi yang agak intensif prestasi kerana ia menyebabkan keseluruhan pokok render dibina semula.

Melukis semula bermaksud apabila gaya elemen (seperti warna, latar belakang, dll.) berubah, penyemak imbas hanya perlu melukis semula elemen ke halaman tanpa mengira semula reka letak. Berbanding dengan aliran semula, lukisan semula mempunyai overhed prestasi yang lebih rendah.

Jadi dari perspektif prestasi, lukisan semula adalah lebih cekap daripada pengaliran semula. Jika operasi aliran semula yang kerap boleh dielakkan, prestasi halaman akan dipertingkatkan.

Tetapi dalam pembangunan sebenar, aliran semula dan lukisan semula sukar untuk dielakkan sepenuhnya. Sesetengah operasi (seperti menukar saiz, kedudukan, gaya, dll.) elemen pasti akan menyebabkan pengaliran semula atau lukisan semula. Oleh itu, semasa menulis kod, kita perlu meminimumkan operasi aliran semula yang kerap, yang boleh dioptimumkan dengan cara berikut:

1. Gunakan sifat transformasi CSS dan bukannya atas/kiri untuk pelarasan kedudukan, kerana transformasi tidak akan mencetuskan aliran semula.
2. Ambil elemen DOM yang memerlukan berbilang operasi di luar talian, seperti dengan menetapkan sifat kedudukannya kepada mutlak, dan masukkan semula elemen tersebut ke dalam strim dokumen sekali gus selepas operasi selesai.
3. Menggunakan serpihan dokumen (DocumentFragment) untuk operasi DOM boleh mengurangkan bilangan aliran semula.
4. Elakkan menggunakan susun atur jadual kerana pengiraan susun atur jadual biasanya memerlukan lebih banyak operasi aliran semula.

Secara amnya, mengoptimumkan kod dengan betul dan meminimumkan bilangan aliran semula dan lukisan semula boleh meningkatkan prestasi dan pengalaman pengguna halaman.

Atas ialah kandungan terperinci Mana yang lebih baik, reflow atau redraw?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!