Optimumkan prestasi halaman: Selesaikan masalah pemuatan halaman yang perlahan yang disebabkan oleh lukisan semula dan pengaliran semula

Tingkatkan kelajuan pemuatan halaman: Untuk menyelesaikan kesesakan prestasi yang disebabkan oleh lukisan semula dan aliran semula halaman, contoh kod khusus diperlukan

Dengan pembangunan Internet, pengguna mempunyai keperluan yang lebih tinggi dan lebih tinggi untuk kelajuan pemuatan halaman web. Kelajuan pemuatan halaman secara langsung berkaitan dengan pengalaman pengguna dan penilaian tapak web, jadi bagi pembangun, meningkatkan kelajuan pemuatan halaman adalah tugas yang sangat penting. Lukisan semula dan pengaliran semula halaman adalah salah satu punca utama pemuatan halaman perlahan. Artikel ini akan memperkenalkan secara terperinci sebab lukisan semula dan pengaliran semula halaman dan cara mengurangkan kesesakan prestasi yang disebabkan olehnya melalui pengoptimuman kod.

Pertama, kita perlu memahami konsep lukis semula dan aliran semula halaman.

Lukisan semula halaman bermakna apabila elemen dalam halaman perlu menukar gayanya, penyemak imbas akan melukis semula elemen ini. Aliran semula halaman bermakna apabila elemen pada halaman menukar kedudukan, saiz, kandungan, dll., penyemak imbas perlu mengira semula kedudukan dan saiz elemen dan kemudian melukis semula elemen ini.

Lukisan semula dan aliran semula halaman memerlukan penyemak imbas untuk memaparkan semula halaman Proses ini sangat memakan prestasi. Oleh itu, kita perlu mengoptimumkan kod untuk mengurangkan bilangan lukis semula halaman dan aliran semula, dengan itu meningkatkan kelajuan pemuatan halaman.

Berikut ialah beberapa petua pengoptimuman biasa:

1. Kurangkan operasi pada DOM

Apabila halaman menukar saiz, kedudukan atau mencetuskan animasi, ia akan menyebabkan pengaliran semula halaman. Oleh itu, kita harus cuba mengurangkan operasi pada DOM dan cuba menggabungkan berbilang operasi menjadi satu.

Sebagai contoh, jika kita perlu menukar lebar dan ketinggian sesuatu elemen, kita boleh menyembunyikannya dahulu, kemudian menukar saiz, dan akhirnya memaparkannya.

// Bad
element.style.width = '100px';
element.style.height = '100px';

// Good
element.style.display = 'none';
element.style.width = '100px';
element.style.height = '100px';
element.style.display = 'block';

2. Elakkan akses kerap kepada atribut gaya

Akses kerap kepada atribut gaya juga akan menyebabkan pengaliran semula halaman. Oleh itu, kita harus cuba mengelak daripada kerap mengakses atribut gaya dalam JavaScript.

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

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

3. Menggunakan serpihan dokumen

Apabila berbilang elemen DOM perlu dicipta secara dinamik, kami boleh menggunakan serpihan dokumen untuk meningkatkan prestasi. Serpihan dokumen ialah bekas ringan di mana berbilang elemen DOM boleh ditambah dan kemudian dimasukkan ke dalam dokumen sekaligus.

// Bad
for (let i = 0; i < 1000; i++) {
  const element = document.createElement('div');
  document.body.appendChild(element);
}

// Good
const fragment = document.createDocumentFragment();
for (let i = 0; i < 1000; i++) {
  const element = document.createElement('div');
  fragment.appendChild(element);
}
document.body.appendChild(fragment);

4. Apabila menggunakan kesan animasi, gunakan transform untuk menggantikan atas/kiri

Apabila menggunakan kesan animasi, gunakan transform untuk menggantikan atas/kiri dan atribut lain untuk mengelakkan pengaliran semula halaman.

.element {
  transform: translate(100px, 100px);
}

/* Bad */
.element {
  top: 100px;
  left: 100px;
}

/* Good */
.element {
  transform: translate(100px, 100px);
}

Melalui teknik pengoptimuman di atas, kami boleh mengurangkan bilangan lukis semula halaman dan aliran semula, seterusnya meningkatkan kelajuan pemuatan halaman. Sudah tentu, terdapat banyak teknik pengoptimuman lain Projek yang berbeza mungkin mempunyai kaedah pengoptimuman yang berbeza Pembangun boleh memilih kaedah pengoptimuman yang sesuai mengikut situasi sebenar.

Ringkasnya, dengan mengurangkan operasi pada DOM, mengelakkan akses kerap kepada atribut gaya, menggunakan serpihan dokumen dan menggunakan transformasi dan bukannya atribut atas/kiri dan lain-lain, kami boleh mengurangkan bilangan lukisan semula dan aliran semula halaman dengan banyak, dengan itu meningkatkan halaman Kelajuan memuatkan. Pada masa yang sama, mengoptimumkan kelajuan memuatkan halaman juga merupakan cara penting untuk meningkatkan pengalaman pengguna Pembangun harus memberi perhatian kepada perkara ini dan menumpukan pada pengoptimuman prestasi semasa proses pembangunan.

Atas ialah kandungan terperinci Optimumkan prestasi halaman: Selesaikan masalah pemuatan halaman yang perlahan yang disebabkan oleh lukisan semula dan pengaliran semula. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!