Mengoptimumkan prestasi bahagian hadapan: cara untuk mengurangkan lukisan semula halaman dan aliran semula

Petua penalaan prestasi bahagian hadapan: Cara mengurangkan lukisan semula dan aliran semula halaman

Dalam pembangunan web, pengoptimuman prestasi bahagian hadapan ialah topik utama. Apabila pengguna melawat halaman web, kelajuan respons halaman secara langsung mempengaruhi pengalaman pengguna, dan salah satu aspek penting ialah kelajuan memuatkan halaman. Faktor yang paling mempengaruhi kelajuan pemuatan halaman ialah lukisan semula dan pengaliran semula.

Lukisan semula halaman merujuk kepada mengemas kini bahagian visual halaman mengikut gaya baharu, manakala aliran semula merujuk kepada proses pengiraan semula reka letak halaman web. Lukis semula dan aliran semula adalah saling bergantung Apabila elemen halaman dilukis semula, ia selalunya akan menyebabkan elemen sekeliling mengalir semula.

Penyusunan semula dan aliran semula yang kerap akan menyebabkan halaman dimuatkan dengan lebih perlahan, jadi kita perlu mengambil beberapa helah untuk mengurangkan kekerapan lukisan semula dan aliran semula.

1. Elakkan menggunakan susun atur jadual: susun atur jadual memerlukan pelayar mengambil kira gaya setiap sel dalam jadual semasa mengira susun atur Oleh itu, apabila elemen dalam jadual berubah, ia akan menyebabkan keseluruhan jadual mengalir semula.

2. Gunakan animasi CSS3 dan bukannya animasi JavaScript: Dalam penyemak imbas moden, CSS3 menyediakan beberapa kesan animasi, seperti peralihan dan transformasi, yang lebih cekap daripada kesan animasi yang dilaksanakan menggunakan JavaScript kerana ia dipaparkan pada tahap perkakasan.

3. Penggunaan munasabah atribut tersembunyi: Tetapkan gaya beberapa elemen yang tidak perlu dipaparkan kepada paparan:tiada atau keterlihatan:tersembunyi untuk mengelakkan lukisan semula dan aliran semula elemen ini.

4 Elakkan pengubahsuaian gaya yang kerap: Apabila kita perlu mengubah suai gaya sesuatu elemen, adalah lebih baik untuk memfokuskan pengubahsuaian bersama-sama daripada menyelerakannya di pelbagai tempat dalam kod. Kerana penyemak imbas akan menggabungkan berbilang pengubahsuaian gaya, mengurangkan bilangan lukisan semula dan aliran semula.

5 Gunakan serpihan dokumen untuk mengurangkan operasi nod: Apabila memasukkan sejumlah besar nod ke dalam halaman, sebaiknya gunakan serpihan dokumen untuk beroperasi dan kemudian masukkannya ke dalam halaman sekaligus. Ini mengelakkan berbilang aliran semula.

Berikut ialah beberapa contoh kod khusus:

1. Elakkan menggunakan susun atur jadual:

   <table>
     <tr>
    <td>Cell 1</td>
    <td>Cell 2</td>
     </tr>
   </table>

   Sebaliknya:

   <div class="row">
     <div class="cell">Cell 1</div>
     <div class="cell">Cell 2</div>
   </div>

2. Gunakan animasi CSS3 dan bukannya animasi JavaScript:

   🜎
disembunyikan dengan betul

// JavaScript动画
function animate(element, target) {
  let position = 0;
  setInterval(() => {
 position += 1;
 element.style.left = position + 'px';
  }, 10);
}

// CSS3动画
.element {
  transition: left 1s;
}

3. Elakkan pengubahsuaian gaya yang kerap:

.hidden-element {
  display: none;
  /* 或者 */
  visibility: hidden;
}

4. Gunakan serpihan dokumen untuk mengurangkan operasi nod:

// 不推荐的做法
element.style.marginTop = '10px';
element.style.marginBottom = '20px';
element.style.marginLeft = '30px';
element.style.marginRight = '40px';

// 推荐的做法
element.style.margin = '10px 20px 30px 40px';

5. Ringkasan:
Dengan mengelakkan penggunaan animasi CSS3 dan susun atur secara tersembunyi, sebaliknya menggunakan animasi JavaScript dan susun atur CSS3 atribut, elakkan pengubahsuaian gaya yang kerap, menggunakan serpihan dokumen untuk mengurangkan operasi nod dan teknik lain, kami boleh mengurangkan lukisan semula halaman dan aliran semula, dengan itu meningkatkan kelajuan memuatkan halaman dan meningkatkan pengalaman pengguna. Dalam kerja sebenar, kita harus menggunakan teknik ini secara munasabah mengikut situasi tertentu untuk menjadikan halaman web kita lebih cekap dan elegan.

Atas ialah kandungan terperinci Mengoptimumkan prestasi bahagian hadapan: cara untuk mengurangkan lukisan semula halaman dan aliran semula. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!