Optimumkan operasi lukis semula dan aliran semula

Cara mengoptimumkan lukisan semula dan aliran semula memerlukan contoh kod khusus

1 Pengenalan latar belakang
Dalam pembangunan bahagian hadapan, lukisan semula dan aliran semula ialah dua isu pengoptimuman prestasi biasa. Melukis semula merujuk kepada melukis semula rupa unsur, manakala pengaliran semula merujuk kepada mengira semula kedudukan dan saiz elemen. Memandangkan penyemak imbas perlu melakukan pengiraan yang rumit dan operasi lukisan, lukisan semula dan aliran semula yang kerap akan menjejaskan prestasi dan pengalaman pengguna halaman dengan serius. Oleh itu, adalah sangat penting untuk mengoptimumkan untuk lukisan semula dan aliran semula.

2. Sebab untuk melukis semula dan mengalir semula

1. Operasi pada DOM: Apabila kami beroperasi pada DOM, seperti menukar atribut atau gaya elemen, penyemak imbas akan memaparkan semula halaman secara automatik. Proses ini termasuk lukisan semula dan pengaliran semula.
2. Pemakaian pemaparan berubah: Jika gaya elemen ditukar, pepohon pemaparan elemen dan semua elemen anaknya perlu dikira semula.
3. Permulaan halaman: Apabila halaman dimuatkan, penyemak imbas akan memulakan keseluruhan halaman dan menjana pepohon pemaparan.

3. Kaedah Pengoptimuman

1. Operasi gabungan: Untuk satu siri operasi DOM, anda boleh menggunakan DocumentFragment atau cloneNode untuk menggabungkan operasi dan kemudian memasukkannya ke dalam dokumen sekaligus, dengan itu mengurangkan bilangan aliran semula.

   let fragment = document.createDocumentFragment();
   for(let i = 0; i < 100; i++){
    let div = document.createElement("div");
    fragment.appendChild(div);
   }
   document.body.appendChild(fragment);

   Salin selepas log masuk

   Salin selepas log masuk

2. Maklumat susun atur cache: Apabila maklumat gaya atau maklumat susun atur sesuatu elemen diakses beberapa kali, maklumat itu boleh dicache untuk mengelakkan penyemak imbas daripada mengiranya beberapa kali.

   let element = document.getElementById("myElement");
   let width = element.offsetWidth;
   let height = element.offsetHeight;
   
   //使用缓存的宽高信息
   for(let i = 0; i < 100; i++){
    element.style.width = width + "px";
    element.style.height = height + "px";
   }

   Salin selepas log masuk

3. Gaya pengubahsuaian kelompok: Kurangkan bilangan kali aliran semula dicetuskan. Gabungkan berbilang operasi pengubahsuaian gaya dan gunakan pengubahsuaian sekali sahaja.

   let element = document.getElementById("myElement");
   element.style.cssText = "width: 100px; height: 100px; background-color: red;";

   Salin selepas log masuk

4. Gunakan serpihan dokumen: Gunakan serpihan dokumen untuk memproses elemen DOM yang memerlukan operasi yang kerap, dan akhirnya masukkannya ke dalam dokumen sekaligus. Ini boleh mengurangkan bilangan aliran semula.

   let fragment = document.createDocumentFragment();
   for(let i = 0; i < 100; i++){
    let div = document.createElement("div");
    fragment.appendChild(div);
   }
   document.body.appendChild(fragment);

   Salin selepas log masuk

   Salin selepas log masuk

5. Gunakan atribut transformasi dan bukannya atas dan kiri: Atribut transformasi boleh menukar kedudukan dan saiz elemen tanpa menyebabkan pengaliran semula.

   let element = document.getElementById("myElement");
   element.style.transform = "translate(100px, 100px)";

   Salin selepas log masuk

IV Ringkasan
Pengoptimuman lukisan semula dan aliran semula ialah bahagian yang tidak boleh diabaikan dalam pembangunan bahagian hadapan Anda boleh mengurangkan saiz halaman dengan menggabungkan operasi, menyimpan maklumat reka letak, gaya pengubahsuaian kelompok, menggunakan serpihan dokumen dan menggunakan. atribut transform. Bilangan lukisan semula dan aliran semula untuk meningkatkan prestasi halaman dan pengalaman pengguna. Pada masa yang sama, dalam projek sebenar, analisis prestasi dan pengoptimuman juga perlu dijalankan mengikut syarat tertentu. Dalam proses melaksanakan kod, anda mesti sentiasa memberi perhatian kepada isu prestasi untuk mencapai hasil pengoptimuman.

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