Cara yang berkesan untuk meningkatkan prestasi: Maksimumkan penggunaan fungsi reflow dan redraw

Cara menggunakan aliran semula dan lukis semula dengan cekap untuk pengoptimuman prestasi

1 Gambaran Keseluruhan
Dalam pembangunan bahagian hadapan, pengoptimuman prestasi ialah pautan yang sangat penting. Aliran semula dan cat semula ialah dua faktor utama yang mempengaruhi prestasi halaman. Artikel ini akan memperkenalkan cara menggunakan aliran semula dan lukis semula secara berkesan untuk pengoptimuman prestasi, dan memberikan beberapa contoh kod khusus.

2. Definisi dan perbezaan antara reflow dan repaint
Reflow dan repaint kedua-duanya adalah sebahagian daripada kerja penyemak imbas semasa memaparkan halaman, tetapi apakah maksud dan perbezaan khusus mereka?

Reflow, iaitu mengira semula kedudukan dan saiz elemen dalam aliran dokumen dan melukisnya ke halaman semula. Aliran semula akan menyebabkan kehilangan prestasi tertentu kerana ia memerlukan pengiraan terbalik reka letak dan sifat geometri halaman. Operasi biasa yang mencetuskan aliran semula termasuk mengubah suai kedudukan, saiz, kandungan teks dan gaya elemen.

Melukis semula merujuk kepada melukis semula elemen pada halaman, tetapi tidak melibatkan pengiraan kedudukan dan saiz. Melukis semula agak murah kerana ia hanya memerlukan menukar warna lukisan dan piksel elemen.

3. Cara menggunakan aliran semula dan lukisan semula untuk pengoptimuman prestasi

1. Elakkan perubahan gaya yang kerap
   Apabila melakukan operasi DOM, cuba tumpukan pengubahsuaian gaya bersama-sama untuk mengurangkan bilangan aliran semula dan lukisan semula. Elakkan daripada kerap memanggil kaedah tetapan atribut gaya secara berasingan, seperti element.style.width = '100px' Sebaliknya, ubah suai gaya dengan menambah/memadamkan kelas.

   Contoh yang salah:

   for (let i = 0; i < elements.length; i++) {
       elements[i].style.width = '100px';
       elements[i].style.height = '100px';
       elements[i].style.color = 'red';
       // ...
   }

   Salin selepas log masuk

   Contoh yang betul:

   for (let i = 0; i < elements.length; i++) {
       elements[i].classList.add('modified-style');
   }

   Salin selepas log masuk

2. Menggunakan caching dan pemprosesan batch
   Apabila sejumlah besar gaya perlu diubah suai, caching dan pemprosesan batch boleh digunakan untuk pengoptimuman prestasi. Mula-mula, simpan gaya yang perlu diubah suai dalam pembolehubah sementara, kemudian ubah suai gaya elemen sekaligus, dan akhirnya tetapkan semula pembolehubah sementara.

   Kod contoh:

   const tempStyles = []; 
   for (let i = 0; i < elements.length; i++) {
       const tempStyle = {
           width: '100px',
           height: '100px',
           color: 'red',
           // ...
       };
       tempStyles.push(tempStyle);
   }
   
   // 批量修改样式
   for (let i = 0; i < elements.length; i++) {
       const element = elements[i];
       const tempStyle = tempStyles[i];
       Object.assign(element.style, tempStyle);
   }
   
   // 重置临时变量
   tempStyles.length = 0;

   Salin selepas log masuk

3. Menggunakan DOM Maya
   Virtual DOM ialah teknologi yang menggunakan objek JavaScript untuk mewakili elemen dan keadaan pada halaman. Dengan mengubah suai dan membandingkan DOM maya dan kemudian mengemas kini DOM sebenar dalam kelompok, bilangan aliran semula dan lukisan semula boleh dikurangkan. Pustaka DOM maya biasa termasuk React, Vue, dsb.

   Kod sampel:

   const list = document.getElementById('list');
   const fragment = document.createDocumentFragment();
   
   for (let i = 0; i < 1000; i++) {
       const li = document.createElement('li');
       li.textContent = 'Item ' + i;
       fragment.appendChild(li);
   }
   
   list.appendChild(fragment);

   Salin selepas log masuk

4. Ringkasan
Alir semula dan lukisan semula mempunyai kesan penting pada prestasi halaman Penggunaan aliran semula dan lukisan semula yang betul untuk pengoptimuman prestasi adalah bahagian penting dalam pembangunan bahagian hadapan. Dengan mengelakkan perubahan gaya yang kerap, menggunakan caching dan pemprosesan kelompok, dan menggunakan DOM maya dan kaedah pengoptimuman lain, bilangan aliran semula dan lukisan semula boleh dikurangkan dengan berkesan dan prestasi pemaparan halaman boleh dipertingkatkan. Walau bagaimanapun, perlu diingatkan bahawa dalam pembangunan sebenar, kaedah pengoptimuman yang paling sesuai harus dipilih mengikut senario tertentu untuk mencapai pengoptimuman prestasi.

Atas ialah kandungan terperinci Cara yang berkesan untuk meningkatkan prestasi: Maksimumkan penggunaan fungsi reflow dan redraw. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!