Lukisan semula dan aliran semula yang kerap: mengapa perlu dielakkan?

Lukis semula dan alir semula: mengapa anda perlu mengelak daripada berlaku terlalu kerap?

Dalam pembangunan bahagian hadapan, kita sering mendengar dua konsep: lukis semula dan aliran semula. Mereka merujuk kepada dua proses utama apabila penyemak imbas memaparkan halaman. Melukis semula merujuk kepada proses apabila penampilan elemen berubah dan paparan perlu dikemas kini; aliran semula merujuk kepada proses apabila sifat geometri unsur berubah dan reka letak perlu dikira semula dan dilukis semula.

Lukisan semula dan pengaliran semula adalah operasi yang sangat memakan prestasi Kejadian yang kerap akan membawa kepada kemerosotan prestasi halaman, malah menyebabkan ketinggalan dan kelajuan memuatkan halaman menjadi perlahan. Oleh itu, kita harus mencuba yang terbaik untuk mengelakkan lukisan semula dan aliran semula yang kerap semasa pembangunan. Seterusnya, mari kita lihat beberapa situasi biasa yang membawa kepada lukisan semula dan aliran semula, dan cara untuk mengelakkannya.

1. Elakkan pengubahsuaian yang kerap pada gaya elemen DOM

Apabila kita kerap mengubah suai gaya elemen DOM, penyemak imbas akan kerap mencetuskan lukisan semula dan aliran semula. Oleh itu, apabila mengubah suai gaya elemen DOM, adalah lebih baik untuk menggabungkan operasi pengubahsuaian bersama-sama dan melaksanakan penukaran gaya dengan mengubah suai nama kelas elemen, yang boleh mengurangkan bilangan lukisan semula dan aliran semula.

// 不推荐写法
var element = document.getElementById('example');
element.style.width = '100px';
element.style.height = '100px';
element.style.backgroundColor = 'red';

// 推荐写法
var element = document.getElementById('example');
element.classList.add('active');

2. Gunakan atribut transform dan bukannya atribut atas/kiri

Apabila menggunakan atribut atas/kiri untuk menukar kedudukan elemen, lukis semula dan aliran semula akan dicetuskan. Menggunakan atribut transform (seperti translateX/translateY) untuk menukar kedudukan elemen tidak akan mencetuskan aliran semula, hanya melukis semula. Oleh itu, sebaiknya gunakan atribut transform apabila anda perlu menukar kedudukan elemen.

// 不推荐写法
var element = document.getElementById('example');
element.style.left = '100px';
element.style.top = '100px';

// 推荐写法
var element = document.getElementById('example');
element.style.transform = 'translate(100px, 100px)';

3. Elakkan kerap membaca atribut saiz elemen

Setiap kali anda membaca atribut saiz elemen (seperti offsetWidth, offsetHeight), aliran semula akan dicetuskan dan membaca nilai atribut ini adalah agak operasi yang memakan prestasi. Oleh itu, kita harus cuba mengelak daripada kerap membaca sifat saiz elemen Kita boleh menyimpan nilai ini atau mendapatkan semuanya sekaligus apabila perlu.

// 不推荐写法
var element = document.getElementById('example');
var width = element.offsetWidth;
var height = element.offsetHeight;

// 推荐写法
var element = document.getElementById('example');
var rect = element.getBoundingClientRect();
var width = rect.width;
var height = rect.height;

4. Gunakan documentFragment untuk mengoptimumkan berbilang sisipan nod

Memasukkan nod ialah operasi yang akan mencetuskan aliran semula Jika anda perlu memasukkan nod beberapa kali, sebaiknya gunakan documentFragment untuk mengoptimumkan, menambah berbilang nod pada documentFragment dan. kemudian lakukannya sekali lagi Disisipkan secara kekal ke dalam DOM.

// 不推荐写法
for (var i = 0; i < 10; i++) {
  var element = document.createElement('div');
  document.body.appendChild(element);
}

// 推荐写法
var fragment = document.createDocumentFragment();
for (var i = 0; i < 10; i++) {
  var element = document.createElement('div');
  fragment.appendChild(element);
}
document.body.appendChild(fragment);

Melalui pengoptimuman aspek di atas, kami boleh mengurangkan bilangan lukisan semula dan aliran semula secara berkesan, serta meningkatkan prestasi dan pengalaman pengguna halaman. Dalam pembangunan sebenar, kami juga boleh menggunakan beberapa alatan dan perpustakaan untuk membantu kami mengesan dan mengoptimumkan masalah lukisan semula dan aliran semula, seperti Chrome DevTools dan alat analisis prestasi.

Untuk meringkaskan, lukisan semula dan pengaliran semula ialah faktor penting yang mempengaruhi prestasi halaman, dan ia harus dielakkan sekerap mungkin dalam pembangunan bahagian hadapan. Dengan menggabungkan pengubahsuaian gaya, menggunakan atribut transform, mengelakkan pembacaan atribut saiz yang kerap dan menggunakan documentFragment untuk mengoptimumkan berbilang sisipan nod, kami boleh mengoptimumkan prestasi halaman dengan berkesan dan meningkatkan pengalaman pengguna.

Atas ialah kandungan terperinci Lukisan semula dan aliran semula yang kerap: mengapa perlu dielakkan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!