Bagaimana untuk mengurangkan aliran semula dan lukis semula

Kaedah untuk mengurangkan aliran semula dan lukis semula termasuk menggunakan animasi CSS3 dan kesan peralihan, menggunakan atribut transformasi dan kelegapan, mengelakkan operasi DOM yang kerap, menggunakan perwakilan acara, menggunakan DOM maya, menggunakan atribut CSS akan menukar, menggunakan requestAnimationFrame, dsb. Pengenalan terperinci: 1. Gunakan animasi CSS3 dan kesan peralihan CSS3 menyediakan beberapa animasi yang berkuasa dan kesan peralihan, yang boleh digunakan untuk menggantikan JavaScript untuk mencapai kesan animasi dan sebagainya.

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

Dalam pembangunan web moden, aliran semula dan mengecat semula adalah dua aspek yang perlu diberi tumpuan dalam pengoptimuman prestasi. Aliran semula dan lukis semula ialah dua langkah penting apabila penyemak imbas memaparkan halaman yang kerap berlaku akan membawa kepada penurunan prestasi halaman dan menjejaskan pengalaman pengguna. Oleh itu, mengurangkan aliran semula dan lukisan semula adalah salah satu kunci untuk mengoptimumkan prestasi halaman web. Artikel ini akan memperkenalkan beberapa teknik untuk mengurangkan aliran semula dan lukis semula untuk membantu pembangun meningkatkan prestasi halaman web.

Pertama, kita perlu memahami konsep reflow dan redraw. Reflow merujuk kepada proses yang berlaku apabila pelayar perlu mengira semula kedudukan dan sifat geometri sesuatu elemen. Contohnya, apabila menukar saiz, kedudukan, fon dan atribut lain unsur, penyemak imbas akan mencetuskan operasi aliran semula. Melukis semula merujuk kepada proses di mana penyemak imbas perlu melukis semula elemen apabila penampilannya berubah. Reflow dan redraw adalah operasi yang sangat intensif sumber, jadi kita perlu meminimumkan kejadiannya.

Berikut ialah beberapa petua untuk mengurangkan aliran semula dan lukis semula:

1 Gunakan animasi CSS3 dan kesan peralihan: CSS3 menyediakan beberapa animasi yang berkuasa dan kesan peralihan yang boleh digunakan untuk mencapai kesan animasi dan bukannya JavaScript. Oleh kerana animasi dan peralihan CSS3 dilakukan dalam enjin pemaparan penyemak imbas, ia tidak mencetuskan aliran semula dan mengecat semula, meningkatkan prestasi.

2 Gunakan atribut transformasi dan kelegapan: Apabila anda perlu menukar kedudukan dan saiz elemen, anda boleh menggunakan atribut transformasi dan bukannya menukar atribut atas, kiri, lebar dan ketinggian elemen. Atribut transformasi dilakukan dalam GPU dan tidak mencetuskan aliran semula atau lukis semula. Di samping itu, apabila anda perlu menukar ketelusan elemen, anda boleh menggunakan atribut kelegapan, yang tidak akan mencetuskan aliran semula dan lukis semula.

3. Elakkan operasi DOM yang kerap: Operasi DOM sangat memakan sumber, terutamanya apabila kedudukan dan saiz elemen perlu diubah. Oleh itu, kita harus cuba mengelakkan operasi DOM yang kerap. Anda boleh menggunakan DocumentFragment untuk memasukkan atau memadamkan berbilang elemen dalam kelompok, atau menggunakan gabungan rentetan untuk menjana serpihan HTML dan kemudian memasukkannya ke dalam DOM sekaligus.

4 Gunakan perwakilan acara: Apabila anda perlu menambahkan pengendali acara yang sama pada berbilang elemen, anda boleh menambahkan pengendali acara pada elemen induk bersama mereka, dan kemudian mengendalikan acara melalui mekanisme menggelegak acara. Ini mengurangkan bilangan pengendali acara, sekali gus mengurangkan kejadian aliran semula dan lukisan semula.

5 Gunakan DOM maya: DOM Maya ialah teknologi yang mengabstrak keadaan halaman ke dalam objek JavaScript, yang boleh dikendalikan pada tahap JavaScript dan kemudian menggunakan perubahan pada DOM sebenar. DOM maya boleh mengemas kini DOM dalam kelompok, mengurangkan kejadian pengaliran semula dan lukisan semula.

6 Gunakan atribut perubahan kehendak CSS: Atribut perubahan kehendak boleh memberitahu penyemak imbas perubahan yang akan berlaku pada elemen, membolehkan penyemak imbas bersedia untuk pengoptimuman terlebih dahulu. Contohnya, apabila kita mengetahui bahawa kedudukan sesuatu elemen akan berubah, kita boleh menggunakan will-change: transform untuk memberitahu penyemak imbas, supaya penyemak imbas boleh mengoptimumkannya semasa membuat rendering.

7 Gunakan requestAnimationFrame: requestAnimationFrame ialah API yang disediakan oleh penyemak imbas untuk mengoptimumkan kesan animasi. Ia membenarkan penyemak imbas untuk melaksanakan fungsi yang ditentukan sebelum lukisan semula seterusnya, dengan itu memastikan kelancaran animasi.

Melalui teknik di atas, kami boleh mengurangkan kejadian aliran semula dan lukis semula dengan berkesan, serta meningkatkan prestasi dan pengalaman pengguna halaman web. Walau bagaimanapun, perlu diingatkan bahawa penyemak imbas yang berbeza mungkin mengendalikan aliran semula dan lukisan semula secara berbeza, jadi ujian dan pengoptimuman perlu dijalankan mengikut keadaan tertentu dalam pembangunan sebenar.

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