Apa itu reflow dan redraw

Reflow bermakna apabila reka letak halaman berubah, penyemak imbas perlu mengira semula kedudukan dan saiz elemen dalam pepohon pemaparan Proses ini melibatkan merentasi pepohon pemaparan, mengira sifat geometri setiap elemen, dan kemudian mengemas kini. reka letak. Reflow ialah operasi yang sangat intensif prestasi kerana ia mencetuskan penyemak imbas untuk menyusun semula keseluruhan halaman. Melukis semula bermakna apabila gaya halaman berubah, penyemak imbas perlu melukis semula elemen yang terjejas Kurang overhed.

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

Alir semula dan lukis semula adalah konsep yang sangat penting dalam pengoptimuman prestasi halaman web. Sebelum memahami kedua-dua konsep ini, kita perlu terlebih dahulu memahami proses pemaparan halaman pelayar.

Apabila penyemak imbas memuatkan halaman web, ia menghuraikan dokumen HTML ke dalam pepohon DOM, dan kemudian menghuraikan gaya CSS ke dalam pepohon CSSOM. Seterusnya, penyemak imbas akan menggabungkan pepohon DOM dan pepohon CSSOM menjadi pepohon pemaparan (Pokok Render). Akhir sekali, penyemak imbas menyusun dan melukis halaman mengikut pepohon rendering.

Reflow bermaksud apabila reka letak halaman berubah, penyemak imbas perlu mengira semula kedudukan dan saiz elemen dalam pepohon pemaparan. Proses ini melibatkan merentasi pokok render, mengira sifat geometri setiap elemen, dan kemudian mengemas kini reka letak. Reflow ialah operasi yang sangat intensif prestasi kerana ia mencetuskan penyemak imbas untuk menyusun semula keseluruhan halaman.

Cat semula bermaksud apabila gaya halaman berubah, penyemak imbas perlu melukis semula elemen yang terjejas. Melukis semula tidak melibatkan pengiraan susun atur, ia hanya memerlukan lukisan semula rupa elemen. Berbanding dengan aliran semula, lukisan semula mempunyai overhed prestasi yang lebih rendah.

Kerap berlakunya aliran semula dan lukisan semula akan menyebabkan penurunan prestasi halaman, jadi adalah perlu untuk meminimumkan bilangan aliran semula dan lukisan semula dalam pembangunan web. Berikut ialah beberapa operasi biasa yang membawa kepada pengaliran semula dan lukisan semula:

1 Ubah suai sifat geometri unsur DOM, seperti menukar lebar, ketinggian, kedudukan, dsb.

2 Ubah suai gaya elemen DOM, seperti menukar warna latar belakang, saiz fon, dsb.

3. Tambah atau alih keluar elemen DOM.

4. Ubah suai saiz tetingkap penyemak imbas.

Untuk mengurangkan bilangan aliran semula dan lukisan semula, kami boleh menggunakan strategi pengoptimuman berikut:

1 Gunakan atribut transformasi CSS dan bukannya mengubah suai kedudukan dan saiz elemen. Atribut transformasi tidak mencetuskan aliran semula, hanya lukis semula, jadi overhed prestasi adalah kecil.

2 Ubah suai atribut gaya yang perlu diubah suai berbilang kali bersama-sama, kemudian gunakannya pada elemen DOM. Ini mengurangkan bilangan aliran semula dan lukisan semula.

3. Gunakan Fragmen Dokumen untuk menambah atau memadam elemen DOM dalam kelompok. Serpihan dokumen ialah bekas DOM sementara di mana berbilang operasi DOM boleh diletakkan, dan kemudian kandungan serpihan dokumen ditambah pada halaman sekaligus, yang boleh mengurangkan bilangan aliran semula.

4. Untuk mengelakkan kerap menukar saiz tetingkap penyemak imbas, anda boleh menggunakan pendikit atau nyahlantun untuk mengawal kekerapan mencetuskan peristiwa.

Ringkasnya, aliran semula dan lukisan semula ialah isu yang perlu difokuskan dalam pengoptimuman prestasi halaman web. Dengan mengurangkan bilangan aliran semula dan lukisan semula, kami boleh meningkatkan prestasi pemaparan halaman web dan meningkatkan pengalaman pengguna.

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