Terokai persamaan, perbezaan dan medan aliran semula dan lukis semula yang berkenaan

Perbincangan mendalam tentang pengaliran semula dan pengecatan semula: perbezaan dan senario aplikasi, contoh kod khusus diperlukan

Kata Pengantar:

Dalam pembangunan bahagian hadapan, pengaliran semula (reflow) dan mengecat semula (mengecat semula) adalah konsep biasa. Ia berkait rapat dengan pemaparan halaman dan penting untuk pengoptimuman prestasi. Artikel ini akan menyelidiki perbezaan antara reflow dan redraw serta senario aplikasinya serta memberikan contoh kod khusus.

1. Apakah reflow?

Reflow merujuk kepada proses di mana penyemak imbas mengira semula dan melukis elemen yang diubah suai. Apabila kita menukar gaya elemen (seperti menukar lebar, ketinggian dan kedudukan), penyemak imbas akan mengira semula sifat geometri elemen dan sub-elemennya dan memaparkan semula halaman. Proses ini agak intensif prestasi.

Reflow akan menyebabkan pengiraan dan susun atur elemen lain, jadi overhednya jauh lebih besar daripada lukisan semula. Banyak kali, kita perlu mengelakkan aliran semula yang kerap untuk meningkatkan prestasi halaman.

2. Apa itu mengecat semula?

Melukis semula bermaksud penyemak imbas melukis semula halaman berdasarkan maklumat gaya elemen, tetapi tidak mengubah sifat geometri elemen. Apabila kami hanya mengubah suai warna elemen, latar belakang dan gaya lain yang tiada kaitan dengan sifat geometri, penyemak imbas hanya akan melakukan operasi lukis semula tanpa pengaliran semula.

Melukis semula adalah lebih murah kerana ia hanya perlu melukis semula bahagian yang telah dipaparkan dan tidak akan menjejaskan susun atur elemen lain. Tetapi terlalu banyak lukisan semula masih akan memberi kesan tertentu pada prestasi.

3. Perbezaan antara reflow dan redraw

Perbezaan terbesar antara reflow dan redraw ialah overhed prestasi dan skop impak.

Reflow mahal: Reflow akan menyebabkan penyemak imbas mengira semula dan memaparkan elemen, dan skop impak biasanya adalah keseluruhan halaman atau sebahagian halaman. Jika operasi aliran semula dicetuskan dengan kerap, prestasi pemaparan halaman akan berkurangan, malah halaman akan membeku.

Kos lukisan semula adalah lebih kecil: lukisan semula hanya akan melukis semula elemen dengan gaya yang diubah suai dan tidak akan menyebabkan pengiraan semula dan reka letak halaman. Oleh itu, overhed lukisan semula adalah agak kecil dan mempunyai kesan kecil pada prestasi halaman.

4. Senario aplikasi aliran semula dan lukis semula

1. Kurangkan operasi aliran semula: Semasa pembangunan, anda harus cuba mengelak daripada mencetuskan operasi aliran semula dengan kerap. Anda boleh mengurangkan kejadian pengaliran semula melalui titik berikut:

• Gunakan atribut kedudukan untuk menggantikan atas/kiri dan operasi lain yang mengubah kedudukan elemen Anda sebaliknya boleh menggunakan transform: translate() untuk memindahkan elemen. Atribut transformasi hanya akan menyebabkan lukisan semula tanpa mencetuskan aliran semula.
• Elakkan memanipulasi atribut gaya dalam gelung Anda boleh menggunakan pengubahsuaian kelompok gaya untuk mengurangkan bilangan aliran semula.
• Untuk mengelak daripada mendapatkan maklumat susun atur elemen apabila halaman dimuatkan, anda boleh menggunakan kaedah tak segerak untuk mendapatkan maklumat susun atur.

Contoh kod khusus:

// 错误示例，频繁触发回流
for (let i = 0; i < 100; i++) {
  element.style.width = '200px';
  element.style.height = '200px';
  element.style.left = i * 10 + 'px';
}

// 正确示例，减少回流
element.style.position = 'absolute';
for (let i = 0; i < 100; i++) {
  element.style.transform = 'translateX(' + i * 10 + 'px)';
}

2. Penggunaan operasi lukis semula yang munasabah: Dalam sesetengah kes apabila gaya sahaja berubah, lukis semula boleh digunakan untuk mengoptimumkan prestasi.

Contoh kod khusus:

// 错误示例，频繁触发回流
for (let i = 0; i < 100; i++) {
  element.style.backgroundColor = 'red';
}

// 正确示例，只触发重绘
for (let i = 0; i < 100; i++) {
  element.style.color = 'red';
}

Ringkasan:

Reflow dan lukis semula ialah konsep biasa dalam pembangunan bahagian hadapan dan penting untuk pengoptimuman prestasi halaman. Overhed aliran semula lebih besar dan overhed lukis semula lebih kecil. Semasa pembangunan, anda harus cuba mengelak daripada mencetuskan operasi aliran semula dengan kerap dan menggunakan operasi lukis semula secara rasional untuk mengurangkan overhed prestasi. Di atas ialah perbincangan mendalam tentang perbezaan dan senario aplikasi aliran semula dan lukisan semula saya harap ia akan membantu pembangunan bahagian hadapan semua orang.

Rujukan:

• [Mengapa aliran semula sangat perlahan](https://developers.google.com/web/fundamentals/performance/rendering/avoid-large-complex-layouts-and-layout-thrashing)

Atas ialah kandungan terperinci Terokai persamaan, perbezaan dan medan aliran semula dan lukis semula yang berkenaan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!