Meningkatkan Prestasi Halaman Web: Petua untuk Mengurangkan Lukisan Semula dan Aliran Semula

Optimumkan prestasi halaman web: Petua untuk mengelakkan lukisan semula dan aliran semula

Dengan populariti peranti mudah alih dan peningkatan berterusan dalam kandungan web, pengguna mempunyai keperluan yang lebih tinggi dan lebih tinggi untuk prestasi halaman web. Dalam proses mengoptimumkan prestasi halaman web, kami sering menghadapi dua konsep yang sangat penting, iaitu mengecat semula dan aliran semula. Kedua-dua konsep ini memberi impak yang besar pada prestasi halaman web Dengan betul mengelakkan atau mengurangkan lukis semula dan aliran semula boleh meningkatkan kelajuan pemuatan dan pengalaman pengguna halaman web dengan ketara. Artikel ini akan memperkenalkan beberapa teknik pengelakan lukis semula dan aliran semula untuk membantu pembangun mengoptimumkan prestasi halaman web.

1. Apa itu lukisan semula dan aliran semula

Lukisan semula bermakna apabila atribut gaya elemen DOM berubah, tetapi tidak menjejaskan reka letaknya, penyemak imbas akan menarik gaya baharu ke skrin, iaitu, operasi lukisan semula . Operasi lukis semula tidak melibatkan pengiraan semula saiz atau kedudukan elemen, jadi ia lebih murah.

Reflow bermaksud apabila atribut reka letak elemen DOM berubah, penyemak imbas akan mengira semula saiz dan kedudukan elemen dan menyusun semula elemen lain yang berkaitan, iaitu, melakukan operasi aliran semula. Operasi pengaliran semula agak mahal dan boleh menyebabkan lukisan semula halaman dan juga masalah kelipan.

2. Bagaimana untuk mengelakkan lukisan semula dan aliran semula

1. Gunakan transformasi dan bukannya atribut atas/kiri

Menggunakan atribut transformasi untuk menukar kedudukan elemen adalah lebih cekap daripada menggunakan atribut atas dan kiri kepada elemen kedudukan. Ini kerana sifat transformasi dikendalikan oleh GPU dan tidak menyebabkan pengaliran semula atau lukisan semula. Oleh itu, untuk operasi yang memerlukan anjakan elemen, cuba gunakan atribut transform dan bukannya atribut atas dan kiri.

2. Menggunakan keterlihatan dan bukannya display:none

Atribut display:none akan menyebabkan elemen hilang daripada aliran dokumen dan mencetuskan aliran semula dan lukis semula. Atribut visibility:hidden hanya akan mencetuskan lukisan semula, bukan aliran semula. Jika anda perlu bertukar antara menunjukkan dan menyembunyikan elemen, cuba gunakan atribut keterlihatan untuk mengelakkan operasi aliran semula.

3. Elakkan operasi atribut gaya yang kerap

Apabila kita perlu melakukan operasi gaya pada elemen, cuba tumpukan operasi dalam satu operasi dan bukannya menyebarkannya ke beberapa operasi. Oleh kerana setiap operasi pada sifat gaya mencetuskan aliran semula dan lukisan semula, menumpukan operasi kepada satu operasi boleh mengurangkan bilangan aliran semula dan meningkatkan prestasi. Anda boleh menggunakan kelas untuk mengubah suai berbilang sifat gaya sekali gus atau menggunakan kaedah untuk mengeluarkan elemen daripada aliran dokumen untuk mengelakkan aliran semula.

4. Gunakan DocumentFragment

Apabila anda perlu memasukkan sejumlah besar elemen DOM, anda boleh menggunakan DocumentFragment untuk caching dan mengurangkan bilangan aliran semula. DocumentFragment ialah objek dokumen ringan yang membolehkan anda memanipulasi elemen DOM dan mengurangkan aliran semula dengan memasukkan DocumentFragment ke dalam dokumen sekali gus.

5. Elakkan manipulasi kerap sifat susun atur

Sifat susun atur termasuk lebar, tinggi, jidar, padding, dsb. elemen Apabila beroperasi pada sifat ini, aliran semula dan lukisan semula akan dicetuskan. Oleh itu, cuba elakkan kerap menukar atribut reka letak elemen Anda boleh menggunakan kedudukan, kedudukan mutlak, terapung dan kaedah lain.

6. Gunakan animasi dan peralihan CSS3

Menggunakan animasi dan peralihan CSS3 boleh memanfaatkan pecutan perkakasan untuk menghidupkan halaman. Berbanding dengan menggunakan JavaScript untuk mencapai kesan animasi, menggunakan animasi dan peralihan CSS3 boleh memberikan prestasi yang lebih baik dan mengurangkan bilangan aliran semula dan lukisan semula.

7. Gunakan pendikit dan anti goncang

Untuk situasi di mana anda perlu memantau penatalan, perubahan saiz tetingkap dan acara lain, anda boleh menggunakan pendikit dan anti goncang untuk mengurangkan bilangan pencetus peristiwa, dengan itu mengurangkan bilangan aliran semula dan melukis semula. Pendikit bermaksud melakukan operasi sekali sahaja dalam selang masa tertentu, manakala anti goncang bermaksud melakukan operasi semula selepas operasi dihentikan untuk tempoh masa.

Ringkasan

Mengoptimumkan prestasi halaman web ialah tugas yang mempertimbangkan secara menyeluruh semua aspek Melukis semula dan aliran semula ialah dua faktor penting yang mempengaruhi prestasi halaman web. Dengan secara munasabah mengelakkan lukisan semula dan aliran semula, kelajuan memuatkan halaman web boleh dipertingkatkan, masa menunggu pengguna boleh dipendekkan dan pengalaman pengguna boleh dipertingkatkan. Artikel ini memperkenalkan beberapa teknik untuk mengelakkan lukisan semula dan pengaliran semula, seperti menggunakan transformasi dan bukannya sifat atas/kiri, menggunakan keterlihatan dan bukannya paparan:tiada, dsb. Saya harap petua ini dapat membantu pembangun mengoptimumkan prestasi halaman web dan memberikan pengalaman pengguna yang lebih baik.

Atas ialah kandungan terperinci Meningkatkan Prestasi Halaman Web: Petua untuk Mengurangkan Lukisan Semula dan Aliran Semula. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!