Lukis semula dan aliran semula dalam fasa pemaparan: yang manakah lebih berkesan?

Lukis semula dan alir semula: Yang manakah mempengaruhi fasa pemaparan?

Dalam pembangunan bahagian hadapan, pengoptimuman prestasi sentiasa menjadi isu penting. Antaranya, mengurangkan operasi mengecat semula dan aliran semula adalah kunci untuk meningkatkan prestasi halaman. Walau bagaimanapun, ramai pembangun tidak jelas tentang konsep dan kesan lukis semula dan aliran semula. Artikel ini akan memperincikan konsep lukis semula dan aliran semula serta kesannya pada fasa pemaparan, digambarkan dengan contoh kod konkrit.

Pertama, mari kita fahami konsep lukis semula dan aliran semula. Melukis semula ialah operasi yang mengubah rupa elemen tanpa menjejaskan sifat susun aturnya. Contohnya, tukar warna latar belakang, warna fon, dsb. Reflow merujuk kepada menukar atribut reka letak elemen, seperti menukar saiz, kedudukan, dsb. elemen. Apabila kami membuat pengubahsuaian pada DOM, penyemak imbas akan melakukan operasi lukis semula dan aliran semula untuk mengemas kini halaman.

Lukisan semula dan aliran semula yang kerap akan menyebabkan kemerosotan prestasi. Pertama sekali, lukisan semula dan aliran semula akan mencetuskan pelaksanaan semula saluran paip pemaparan, yang akan menggunakan sejumlah sumber pengkomputeran. Kedua, lukisan semula dan aliran semula akan menyebabkan halaman dilukis semula, yang boleh menyebabkan halaman berkelip atau beku, memberikan pengalaman buruk kepada pengguna. Oleh itu, mengurangkan operasi lukisan semula dan aliran semula adalah penting untuk meningkatkan prestasi halaman dan pengalaman pengguna.

Seterusnya, kami menggunakan contoh kod khusus untuk menggambarkan kesan lukisan semula dan aliran semula pada fasa pemaparan. Katakan kami mempunyai senarai, setiap item senarai di dalamnya mempunyai gaya dengan item kelas, dan kami ingin menukar warna latar belakang setiap item senarai:

<ul id="list">
  <li class="item">列表项1</li>
  <li class="item">列表项2</li>
  <li class="item">列表项3</li>
  <li class="item">列表项4</li>
</ul>

Pertama, kami menggunakan JavaScript untuk menukar warna latar belakang item senarai:

var items = document.getElementsByClassName('item');
for (var i = 0; i < items.length; i++) {
    items[i].style.backgroundColor = 'red';
}

Kod di atas akan menyebabkan penyemak imbas melakukan operasi lukis semula Apabila mengubah suai warna latar belakang setiap item senarai, ia hanya akan menukar atribut penampilan elemen dan tidak akan menjejaskan atribut reka letak elemen.

Seterusnya, mari kita ubah suai kod sekali lagi dan tukar operasi menukar warna latar belakang kepada menukar saiz elemen:

var items = document.getElementsByClassName('item');
for (var i = 0; i < items.length; i++) {
    items[i].style.width = '100px';
    items[i].style.height = '100px';
}

Kod ini akan mencetuskan operasi aliran semula, kerana kita menukar saiz elemen, yang akan menjejaskan atribut susun atur elemen.

Seperti yang anda lihat daripada contoh kod di atas, operasi lukis semula dan aliran semula mempunyai kesan yang berbeza pada fasa pemaparan. Melukis semula hanya mengubah sifat penampilan elemen, manakala aliran semula mengubah sifat susun atur elemen. Dalam pembangunan sebenar, kita harus cuba mengelakkan lukisan semula dan operasi aliran semula yang kerap Kita boleh mengurangkan kehilangan prestasi melalui kaedah pengoptimuman berikut:

1 Gunakan sifat CSS seperti transformasi dan animasi untuk mencapai kesan animasi, dan ia tidak akan mencetuskan operasi Reflow , prestasi yang lebih baik.
2. Kurangkan bilangan lukisan semula dan aliran semula dengan mengubah suai DOM dalam kelompok.
3 Gunakan DocumentFragment untuk mengurangkan bilangan operasi DOM dan menggabungkan berbilang operasi DOM menjadi satu.

Ringkasnya, lukis semula dan aliran semula adalah faktor penting yang mempengaruhi prestasi halaman. Pembangun harus memahami konsep dan kesan mereka, mengoptimumkan kod dengan betul dan mengurangkan kejadian operasi lukis semula dan aliran semula untuk meningkatkan prestasi halaman dan pengalaman pengguna.

Rujukan:

• [Pengoptimuman Rendering Penyemak Imbas: Cara penyemak imbas berfungsi](https://developers.google.com/web/fundamentals/performance/rendering?hl=zh-cn#maintain-style-consistency)
• [ Memahami Cat Semula dan Aliran Semula dalam JavaScript](https://medium.com/reloading/javascript-start-up-performance-69200f43b201#.du2iynrih)

Atas ialah kandungan terperinci Lukis semula dan aliran semula dalam fasa pemaparan: yang manakah lebih berkesan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!