Reflows dan Repaints dalam Javascript

Apakah amalan terbaik untuk mengoptimumkan CSS bagi mengurangkan pengaliran semula dan pengecatan semula yang tidak perlu, terutamanya dalam aplikasi berskala besar?

1. Aliran Semula (Pengiraan Semula Reka Letak):

Satu aliran semula (juga dipanggil susun atur atau susun atur semula) berlaku apabila penyemak imbas mengira semula kedudukan, saiz dan reka letak elemen pada halaman. Proses ini berlaku setiap kali reka letak halaman berubah seperti apabila elemen ditambah, dialih keluar, saiz semula atau keterlihatannya berubah. Ia merupakan operasi yang lebih kompleks dan memakan masa

Contoh :

<div id="box" style="width: 100px; height: 100px; background-color: blue;"></div>

<script>
const box = document.getElementById('box');
// Triggering a reflow by changing width and height
box.style.width = '200px';
box.style.height = '200px';

// Triggering a repaint by changing the background color
box.style.backgroundColor = 'red';
</script>

Bilakah pengaliran semula berlaku?

• Menambah, mengalih keluar atau mengubah suai elemen DOM (cth., appendChild, removeChild).
• Menukar reka letak dengan melaraskan gaya CSS seperti lebar, tinggi, jidar, padding, dll.
• Mengubah saiz tetingkap atau menukar saiz elemen.
• Menukar saiz fon atau sifat fon.
• Menggunakan kaedah seperti offsetWidth, offsetHeight, scrollTop, getBoundingClientRect() kerana ia memaksa penyemak imbas untuk mengira semula reka letak.

Cara pengaliran semula berfungsi:

Apabila anda menukar sesuatu yang mempengaruhi reka letak halaman, penyemak imbas perlu:

1. Kira semula kedudukan dan dimensi semua elemen yang terjejas oleh perubahan.
2. Bina semula pepohon reka letak, yang merupakan perwakilan dalaman cara elemen dibentangkan.

Jika banyak elemen dipengaruhi oleh satu perubahan, pengaliran semula boleh menjadi mahal dan memperlahankan prestasi tapak anda.

2. Cat semula (Kemas Kini Visual)

cat semula (atau lukis semula) berlaku apabila sifat visual sesuatu elemen berubah tetapi reka letak tidak. Ia lebih murah daripada aliran semula kerana ia hanya memerlukan mengemas kini penampilan elemen tanpa mengira semula kedudukan atau reka letaknya. Pengecatan semula berlaku selepas reka letak dikira semula (dalam kes di mana kedua-duanya diperlukan) atau apabila sifat yang tidak menjejaskan reka letak ditukar, seperti warna atau keterlihatan.

Contoh :

<div id="box" style="width: 100px; height: 100px; background-color: blue;"></div>

<script>
// Triggering a repaint by changing the background color
box.style.backgroundColor = 'red';
</script>

Bilakah pengecatan semula berlaku?

• Menukar sifat warna latar belakang, warna sempadan atau keterlihatan.
• Menukar bayang-bayang kotak, garis besar atau warna elemen.
• Mengemas kini kelegapan (kelegapan), mengubah (mengubah) atau indeks-z.

Mengecat semula tidak melibatkan pengiraan semula reka letak, jadi ia lebih pantas daripada aliran semula, tetapi ia masih memerlukan melukis semula bahagian halaman, yang mengambil sedikit masa.

Saluran Paip Rendering

1. Pembinaan DOM: Penyemak imbas menghuraikan HTML untuk membina pepohon DOM (Model Objek Dokumen).
2. Pembinaan CSSOM: CSS dihuraikan untuk membina pepohon CSSOM (Model Objek CSS).
3. Render Tree Construction: DOM dan CSSOM digabungkan untuk mencipta render tree, yang mengandungi maklumat visual untuk setiap elemen yang boleh dilihat.
4. Reka letak (Reflow): Penyemak imbas mengira kedudukan dan saiz setiap elemen yang boleh dilihat dalam pepohon pemaparan.
5. Cat: Penyemak imbas mengisi piksel berdasarkan sifat visual seperti warna, sempadan, bayang-bayang, dll.
6. Komposit: Penyemak imbas menyusun lapisan dicat yang berbeza (untuk elemen kompleks seperti animasi, perubahan 3D, dll.) dan memaparkannya pada skrin.

Kesan Prestasi

• Reflow: Mahal dari segi prestasi, terutamanya jika ia menjejaskan sebahagian besar halaman atau dicetuskan berulang kali (cth., dalam gelung atau pada saiz semula). Ia menjejaskan reka letak halaman dan memerlukan pengiraan semula kedudukan dan saiz elemen.
• Cat semula: Lebih murah daripada aliran semula tetapi masih memberi kesan kepada prestasi, terutamanya jika banyak elemen perlu dicat semula dengan kerap.

Cara Mengoptimumkan Aliran Semula dan Mengecat Semula

1. Minimumkan manipulasi DOM : Gunakan teknik seperti menggabungkan kemas kini DOM (seperti yang dinyatakan sebelum ini) atau DocumentFragment untuk membuat berbilang perubahan sekaligus, bukannya satu demi satu.

2. Elakkan perebutan reka letak : Jika anda membaca sifat reka letak (cth., offsetHeight) dan segera menulis (tukar reka letak) dalam kitaran yang sama, ia memaksa pengaliran semula, yang dikenali sebagai pecah reka letak. Untuk mengelakkan ini, pisahkan sifat membaca dan menulis DOM dalam langkah yang berbeza.
   

   <div id="box" style="width: 100px; height: 100px; background-color: blue;"></div>
   
   <script>
   const box = document.getElementById('box');
   // Triggering a reflow by changing width and height
   box.style.width = '200px';
   box.style.height = '200px';
   
   // Triggering a repaint by changing the background color
   box.style.backgroundColor = 'red';
   </script>
   

3. Gunakan kelas CSS : Daripada mengubah suai gaya individu, gunakan kelas CSS untuk membuat perubahan. Penyemak imbas mengendalikan penukaran kelas dengan lebih cekap.
   

   <div id="box" style="width: 100px; height: 100px; background-color: blue;"></div>
   
   <script>
   // Triggering a repaint by changing the background color
   box.style.backgroundColor = 'red';
   </script>
   

4. Kurangkan kerumitan CSS: Elakkan elemen bersarang dalam dan peraturan CSS yang terlalu kompleks yang boleh mencetuskan aliran semula.

5. Gunakan keterlihatan: tersembunyi dan bukannya paparan: tiada apabila anda hanya mahu menyembunyikan elemen tanpa menjejaskan reka letak. paparan: tiada yang mencetuskan aliran semula, manakala keterlihatan: tersembunyi hanya mencetuskan pengecatan semula.

Kesimpulan

• Aliran Semula melibatkan pengiraan semula reka letak halaman dan lebih mahal dari segi prestasi.
• Mengecat semula mengemas kini penampilan visual tanpa menjejaskan reka letak dan lebih murah.
• Meminimumkan kedua-duanya membantu memastikan tapak anda responsif dan pantas, meningkatkan pengalaman pengguna.

Atas ialah kandungan terperinci Reflows dan Repaints dalam Javascript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!