Kuasai kesesakan prestasi aliran semula dan lukis semula: kaedah untuk mengoptimumkan prestasi halaman

Tingkatkan prestasi halaman: Untuk memahami kesesakan prestasi aliran semula dan lukis semula, contoh kod khusus diperlukan

Ikhtisar:
Apabila membangunkan aplikasi web, prestasi halaman adalah pertimbangan yang sangat penting. Halaman web berprestasi tinggi bukan sahaja memberikan pengalaman yang lebih baik untuk pengguna, tetapi juga meningkatkan kedudukan enjin carian. Untuk meningkatkan prestasi halaman, adalah penting untuk memahami kesesakan prestasi aliran semula dan lukisan semula.

Alir semula dan lukis semula merujuk kepada proses penyemak imbas mengira dan memaparkan halaman berdasarkan gaya CSS. Reflow merujuk kepada proses yang mana penyemak imbas melengkapkan semua pengiraan dan menyusun semula halaman, manakala lukis semula merujuk kepada proses yang mana penyemak imbas melukis semula halaman mengikut gaya baharu. Kejadian reflow dan redraw yang kerap berlaku akan menyebabkan prestasi halaman merosot, jadi kita perlu mengelakkan situasi ini seboleh-bolehnya.

Kesempitan prestasi aliran semula dan lukisan semula:

1. Tukar saiz dan kedudukan elemen: Apabila kita menukar saiz dan kedudukan elemen, penyemak imbas perlu mengira semula dan melaraskan susun atur elemen lain, sekali gus mencetuskan aliran semula dan lukisan semula. Dalam kes ini, kita harus cuba mengelak menukar saiz dan kedudukan elemen dengan kerap.
2. Ubah suai kandungan elemen: Apabila kami mengubah suai kandungan teks elemen atau memasukkan atau memadamkan nod elemen, penyemak imbas juga perlu mengira semula dan melukis halaman, mencetuskan aliran semula dan lukisan semula. Oleh itu, apabila mengubah suai kandungan elemen, kita harus cuba mengurangkan bilangan operasi pada DOM. Kita boleh mempertimbangkan kemas kini kelompok atau menggunakan serpihan dokumen untuk beroperasi.
3. Laraskan gaya elemen: Menukar gaya elemen, seperti menukar warna latar belakang, saiz fon, dsb., juga akan menyebabkan aliran semula dan lukisan semula. Untuk mengelakkan situasi ini, kita boleh menukar gaya dengan menukar nama kelas dan bukannya mengubah suai secara langsung gaya elemen.

Contoh kod:
Berikut ialah beberapa contoh kod biasa yang mudah membawa kepada pengaliran semula dan lukisan semula:

1. Kerap mengubah suai gaya elemen:

const element = document.getElementById('myElement');
for (let i = 0; i < 1000; i++) {
  element.style.width = '100px';
  element.style.height = '100px';
  // ...其他样式修改
}

Kaedah penambahbaikan:

r

const element = document.getElementById('myElement');
element.classList.add('myClassName');

kandungan:

const element = document.getElementById('myElement');
for (let i = 0; i < 1000; i++) {
  element.innerHTML += '<div>' + i + '</div>';
}

🜎 reee
2. Kaedah penambahbaikan:

const element = document.getElementById('myElement');
const fragment = document.createDocumentFragment();
for (let i = 0; i < 1000; i++) {
  const div = document.createElement('div');
  div.textContent = i;
  fragment.appendChild(div);
}
element.appendChild(fragment);

Mendapatkan maklumat kedudukan elemen:

const element = document.getElementById('myElement');
const width = element.offsetWidth;
const height = element.offsetHeight;
// ...

3. Kaedah penambahbaikan: Cuba kurangkan bilangan kali untuk mendapatkan maklumat kedudukan elemen.

Kesimpulan:

Dalam pembangunan sebenar, kita perlu mengoptimumkan prestasi halaman, mengelak daripada mencetuskan aliran semula dan lukis semula yang kerap, serta meningkatkan pengalaman pengguna dan prestasi halaman web. Dengan memahami kesesakan prestasi aliran semula dan lukis semula, kami boleh mengoptimumkan serpihan kod tertentu untuk mengurangkan kerja pengiraan yang tidak perlu dan meningkatkan kecekapan menjalankan kod. Terutamanya dalam senario yang melibatkan sejumlah besar operasi DOM, penggunaan kaedah pengoptimuman yang betul dalam contoh kod boleh meningkatkan prestasi halaman dengan ketara.

Atas ialah kandungan terperinci Kuasai kesesakan prestasi aliran semula dan lukis semula: kaedah untuk mengoptimumkan prestasi halaman. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!