Apakah kesan aliran semula dan lukis semula?

Kesan aliran semula dan lukis semula termasuk kehilangan prestasi, kelipan halaman dan pembekuan halaman. Pengenalan terperinci: 1. Kehilangan prestasi, aliran semula adalah lebih mahal daripada lukisan semula, kerana aliran semula perlu mengira semula reka letak, manakala lukisan semula hanya perlu melukis semula penampilan yang kerap akan menyebabkan kelajuan pemaparan halaman menjadi perlahan, menjejaskan pengalaman pengguna ; 2. Halaman berkelip-kelip Apabila aliran semula dan lukisan semula kerap berlaku, halaman mungkin berkelip Ini kerana apabila penyemak imbas memaparkan semula halaman, ia mula-mula mengosongkan kandungan asal dan kemudian melukisnya semula berkelip; 3. Halaman membeku, dsb.

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

Reflow dan redraw ialah dua konsep yang biasa digunakan dalam pembangunan bahagian hadapan Ia mempunyai kesan penting pada prestasi halaman web dan pengalaman pengguna. Artikel ini akan memperkenalkan secara terperinci definisi, perbezaan dan impak pada prestasi halaman web aliran semula dan lukis semula, serta memberikan beberapa petua pengoptimuman.

1. Definisi aliran semula dan lukis semula

1: Apabila struktur DOM berubah, atau kedudukan, saiz, kandungan dan atribut elemen lain berubah, penyemak imbas akan mengira semula atribut geometri elemen dan Membina semula pemaparan. pokok ialah satu proses yang dipanggil reflow. Aliran semula akan menyebabkan pengiraan semula reka letak, yang mempunyai overhed yang besar pada prestasi.

2 Mengecat semula: Apabila gaya elemen berubah, tetapi tidak menjejaskan sifat geometrinya, penyemak imbas akan melukis semula penampilan elemen ini. Melukis semula tidak mengubah susun atur dan mempunyai overhed prestasi yang agak kecil.

2. Perbezaan antara reflow dan redraw

Perbezaan antara reflow dan redraw ialah sama ada ia melibatkan perubahan susun atur. Reflow menyebabkan pengiraan semula reka letak, manakala lukisan semula hanya melukis semula penampilan elemen. Oleh itu, aliran semula adalah lebih mahal daripada lukisan semula.

3. Kesan aliran semula dan lukisan semula pada prestasi halaman web

1 Kehilangan prestasi: Aliran semula lebih mahal daripada lukisan semula, kerana aliran semula memerlukan pengiraan semula reka letak, manakala lukisan semula hanya memerlukan lukisan semula rupa. Aliran semula yang kerap akan memperlahankan kelajuan pemaparan halaman dan menjejaskan pengalaman pengguna.

2. Halaman berkelip: Apabila aliran semula dan lukisan semula kerap berlaku, halaman mungkin berkelip. Ini kerana apabila penyemak imbas memaparkan semula halaman, ia akan mengosongkan kandungan asal dahulu dan kemudian melukisnya semula Proses ini akan menyebabkan halaman berkelip.

3. Halaman membeku: Apabila elemen dalam halaman sering dialirkan semula dan dilukis semula, kelajuan pemaparan halaman akan menjadi perlahan, sekali gus menjejaskan pengalaman pengendalian pengguna. Terutamanya pada peranti mudah alih, disebabkan oleh had prestasi perkakasan, kesan pengaliran semula dan lukisan semula pada halaman adalah lebih jelas.

4. pengubahsuaian pada masa yang sama Gaya sesuatu elemen. Anda boleh menggunakan pemilih kelas CSS untuk mengubah suai gaya dalam kelompok.

2 Gunakan transformasi dan bukannya atas dan kiri: Apabila anda perlu mengubah suai kedudukan elemen, gunakan atribut transformasi dan bukannya mengubah suai atribut atas dan kiri secara langsung. Kerana transformasi tidak mencetuskan aliran semula, prestasi boleh dipertingkatkan.

3 Gunakan requestAnimationFrame: Gunakan requestAnimationFrame untuk melaksanakan kesan animasi, yang boleh menggabungkan berbilang lukisan semula menjadi satu, mengurangkan overhed prestasi.

4. Gunakan teknologi DOM maya: Teknologi DOM maya boleh mengurangkan bilangan aliran semula dan lukisan semula. Dengan membandingkan perbezaan antara DOM maya dan DOM sebenar, hanya bahagian yang diubah dikemas kini untuk mengurangkan aliran semula dan lukisan semula yang tidak perlu.

5 Elakkan menggunakan reka letak jadual: Reka letak jadual akan mencetuskan banyak aliran semula semasa pemaparan, jadi cuba elakkan menggunakan reka letak jadual.

Ringkasan: Aliran semula dan lukisan semula mempunyai kesan penting pada prestasi halaman web. Aliran semula dan lukisan semula yang kerap akan menyebabkan kelajuan pemaparan halaman menjadi perlahan dan menjejaskan pengalaman pengguna. Melalui teknik pengoptimuman yang munasabah, bilangan aliran semula dan lukisan semula boleh dikurangkan dan prestasi halaman web boleh dipertingkatkan.

Atas ialah kandungan terperinci Apakah kesan aliran semula dan lukis semula?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!