Mengoptimumkan prestasi bahagian hadapan: petua dan kaedah untuk mengurangkan lukisan semula dan aliran semula

Meningkatkan prestasi bahagian hadapan: Petua dan kaedah untuk mengelakkan lukisan semula dan aliran semula

Dalam pembangunan bahagian hadapan, mengoptimumkan prestasi ialah topik penting. Antaranya, mengelakkan operasi lukis semula (Repaint) dan reflow (Reflow) yang tidak perlu adalah kunci untuk meningkatkan prestasi halaman. Artikel ini akan memperkenalkan beberapa teknik dan kaedah yang boleh membantu pembangun mengelakkan lukisan semula dan pengaliran semula, serta memberikan contoh kod khusus.

1. Apa itu lukisan semula dan aliran semula

1. Lukisan semula: Apabila gaya elemen DOM berubah tanpa menjejaskan sifat geometrinya (seperti kedudukan dan saiz), penyemak imbas akan melakukan operasi lukisan semula. Melukis semula merujuk kepada mengemas kini kesan visual sesuatu elemen tanpa menjejaskan reka letak.
2. Reflow: Apabila sifat geometri elemen DOM berubah, penyemak imbas perlu mengira semula sifat geometri elemen dan susun atur semula halaman Proses ini dipanggil aliran semula.

Lukisan semula dan aliran semula akan menyebabkan penggunaan prestasi tertentu Jika ia berlaku dengan kerap, ia akan menjejaskan prestasi halaman dengan serius.

2 Petua dan kaedah untuk mengelakkan lukisan semula dan aliran semula

1. Gunakan kelas dan bukannya gaya: Apabila menetapkan gaya elemen, cuba gunakan kelas untuk mengubah suai gaya elemen dan bukannya mengendalikan atribut gaya elemen secara langsung . Kerana mengubah suai atribut gaya akan menyebabkan operasi aliran semula, menggunakan kelas untuk mengubah suai gaya hanya akan mencetuskan lukisan semula.

Contoh kod:

// 不推荐的写法
element.style.width = '200px';
element.style.height = '100px';
element.style.backgroundColor = 'red';

// 推荐的写法
element.classList.add('custom-style');

2. Gunakan DocumentFragment: Apabila menambahkan sejumlah besar elemen DOM pada halaman, anda boleh mula-mula menambah elemen ini pada serpihan dokumen, dan kemudian masukkan dokumen itu sekali gus, yang boleh mengurangkan bilangan pengaliran semula.

Contoh kod:

const fragment = document.createDocumentFragment();

for (let i = 0; i < 1000; i++) {
  const div = document.createElement('div');
  div.innerHTML = 'Element ' + i;
  fragment.appendChild(div);
}

document.getElementById('container').appendChild(fragment);

3. Gunakan transformasi dan bukannya atas/kiri: Apabila anda perlu menukar kedudukan elemen, cuba gunakan atribut transformasi dan bukannya mengubah suai atribut atas dan kiri secara terus. Oleh kerana menggunakan transformasi tidak akan mencetuskan operasi pengaliran semula, mengubah suai terus sifat atas dan kiri akan menyebabkan penyemak imbas mengira semula reka letak elemen.

Contoh kod:

// 不推荐的写法
element.style.top = '100px';
element.style.left = '200px';

// 推荐的写法
element.style.transform = 'translate(200px, 100px)';

4. Gunakan DOM maya (DOM Maya): DOM Maya ialah struktur data dalam memori yang meminimumkan operasi lukisan semula dan aliran semula halaman dengan membandingkan perbezaan antara DOM maya dan DOM sebenar. Menggunakan beberapa rangka kerja bahagian hadapan yang popular (seperti React, Vue) akan membantu anda mengendalikan DOM maya secara automatik.

Kod contoh:

// 使用 React 创建虚拟 DOM
const element = <div>Hello, World!</div>;

// 将虚拟 DOM 导入真实 DOM
ReactDOM.render(element, document.getElementById('root'));

Ringkasan:

Lukisan semula dan aliran semula ialah isu yang memerlukan perhatian khusus dalam pengoptimuman prestasi bahagian hadapan. Dengan menggunakan kelas dan bukannya gaya, menggunakan serpihan dokumen, menggunakan transformasi dan bukannya atas/kiri, dan menggunakan DOM maya serta teknik dan kaedah lain, kami boleh mengurangkan operasi lukis semula dan aliran semula halaman dengan ketara serta meningkatkan prestasi halaman. Dalam pembangunan sebenar, adalah disyorkan bahawa pembangun sentiasa memberi perhatian kepada prestasi halaman dan mengikuti petua dan kaedah di atas untuk pengoptimuman.

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