Kunci kepada prestasi halaman: mengoptimumkan bahagian hadapan untuk mengelakkan lukisan semula halaman dan aliran semula

Penting untuk pengoptimuman bahagian hadapan: Cara berkesan mengelakkan lukisan semula halaman dan aliran semula memerlukan contoh kod khusus

Dengan perkembangan pesat Internet, pembangunan bahagian hadapan telah menjadi semakin penting dalam mengoptimumkan prestasi halaman web. Antaranya, mengelakkan lukisan semula halaman dan aliran semula adalah faktor utama dalam meningkatkan prestasi halaman web. Artikel ini akan memperkenalkan beberapa kaedah berkesan dan contoh kod khusus untuk membantu pembangun bahagian hadapan dengan berkesan mengurangkan lukisan semula dan aliran semula halaman serta meningkatkan pengalaman pengguna.

1. Punca dan kesan lukisan semula dan aliran semula halaman

1. Lukisan semula halaman: bermakna apabila gaya elemen berubah, penyemak imbas perlu melukis semula sebahagian atau semua kandungan elemen. Contohnya, apabila atribut gaya seperti warna dan latar belakang sesuatu elemen diubah suai, elemen tersebut akan dilukis semula.
2. Aliran semula halaman: bermakna apabila reka letak halaman dan atribut geometri berubah, penyemak imbas perlu mengira semula reka letak dan atribut geometri elemen, dan kemudian mengemas kini hasil pemaparan halaman. Sebagai contoh, apabila saiz, kedudukan dan atribut lain unsur diubah suai, pengaliran semula unsur dan unsur nenek moyangnya akan dicetuskan.

Lukis semula dan aliran semula akan menyebabkan penyemak imbas mengira semula dan memaparkan halaman, memakan sumber dan masa pengkomputeran tambahan, sekali gus menjejaskan prestasi dan kelajuan tindak balas halaman. Terutamanya pada peranti mudah alih, kehilangan prestasi ini lebih ketara.

2. Kaedah untuk mengelakkan lukisan semula dan aliran semula halaman

1. Gunakan DOM maya: DOM Maya boleh mengelakkan lukisan semula dan aliran semula halaman yang kerap. Ia berfungsi dengan menyimpan elemen dan menyatakan pada halaman dalam ingatan, kemudian mengemas kini hanya bahagian yang diubah, dan akhirnya menjadikan bahagian yang diubah ke halaman. Ia boleh dilaksanakan menggunakan mekanisme DOM maya yang disediakan oleh rangka kerja bahagian hadapan seperti React dan Vue.

2. Operasi DOM dalam kelompok: Kurangkan bilangan operasi langsung pada DOM dan cuba lakukan operasi DOM dalam kelompok. Apabila anda perlu mengubah suai gaya elemen berbilang kali, anda boleh mengubah suai gaya berbilang elemen serentak dengan menambah atau memadam kelas.

   // 错误示例：多次修改元素样式
   element.style.width = '100px';
   element.style.height = '200px';
   element.style.backgroundColor = 'red';
   
   // 正确示例：一次性修改元素样式
   element.classList.add('modified');

3. Elakkan penyegerakan paksa reka letak: Untuk operasi yang memerlukan mendapatkan maklumat susun atur elemen, seperti offsetWidth, offsetHeight, dsb., bilangan panggilan hendaklah diminimumkan. Jika anda perlu mendapatkan maklumat susun atur elemen beberapa kali, anda boleh menyimpannya dalam pembolehubah dahulu dan kemudian menggunakannya semula.

   // 错误示例：多次获取元素布局信息
   for (let i = 0; i < elements.length; i++) {
    console.log(elements[i].offsetWidth);
    console.log(elements[i].offsetHeight);
   }
   
   // 正确示例：一次获取元素布局信息
   for (let i = 0; i < elements.length; i++) {
    const width = elements[i].offsetWidth;
    const height = elements[i].offsetHeight;
    console.log(width);
    console.log(height);
   }

4. Gunakan pengoptimuman animasi: Apabila anda perlu menggunakan kesan animasi, elakkan mengubah suai secara langsung atribut gaya elemen, cuba gunakan animasi CSS atau gunakan kaedah requestAnimationFrame untuk pengoptimuman. Animasi CSS boleh menggunakan atribut transformasi untuk mencapai kesan animasi seperti anjakan dan penskalaan tanpa mencetuskan aliran semula halaman.

   /* CSS动画示例 */
   .box {
    transition: transform 1s;
   }
   
   .box:hover {
    transform: translateX(100px);
   }

   /* requestAnimationFrame示例 */
   function animate() {
    element.style.transform = `translateX(${x}px)`;
   
    if (x < targetX) {
    requestAnimationFrame(animate);
    }
   }
   
   animate();

5. Gunakan serpihan dokumen: Apabila anda perlu menjana berbilang nod DOM secara dinamik, anda boleh menggunakan serpihan dokumen (DocumentFragment) untuk meningkatkan prestasi. Serpihan dokumen ialah bekas DOM maya, yang boleh digunakan untuk menambah berbilang nod DOM terus ke dokumen, mengurangkan berbilang operasi aliran semula.

   // 错误示例：逐个添加DOM节点
   for (let i = 0; i < data.length; i++) {
    const item = document.createElement('li');
    item.textContent = data[i];
    list.appendChild(item);
   }
   
   // 正确示例：使用文档片段添加DOM节点
   const fragment = document.createDocumentFragment();
   
   for (let i = 0; i < data.length; i++) {
    const item = document.createElement('li');
    item.textContent = data[i];
    fragment.appendChild(item);
   }
   
   list.appendChild(fragment);

3. Ringkasan

Artikel ini memperkenalkan beberapa kaedah untuk mengelakkan lukisan semula dan pengaliran semula halaman, serta menyediakan contoh kod khusus. Dengan menggunakan kaedah ini dengan betul, pembangun bahagian hadapan boleh mengurangkan lukisan semula dan pengaliran semula halaman dengan berkesan, meningkatkan prestasi halaman web dan memberikan pengalaman pengguna yang lebih baik. Dalam pembangunan sebenar, pembangun juga boleh mengoptimumkan berdasarkan senario tertentu untuk meningkatkan lagi prestasi halaman web.

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