Memahami lukis semula dan aliran semula: peringkat pemaparan yang manakah lebih terjejas?-html tutorial-php.cn

Memahami lukis semula dan aliran semula: peringkat pemaparan yang manakah lebih terjejas?

WBOY

Lepaskan： 2024-01-26 09:43:45

asal

1325 orang telah melayarinya

Memahami lukis semula dan aliran semula: peringkat pemaparan yang manakah lebih terjejas?

Memahami lukisan semula dan aliran semula: peringkat pemaparan manakah yang lebih terjejas?

Dalam pembangunan bahagian hadapan, pengoptimuman prestasi adalah tugas penting. Apabila meningkatkan prestasi halaman web, kami sering menghadapi dua konsep yang berkaitan: lukis semula dan aliran semula. Kedua-dua konsep berkaitan dengan fasa pemaparan halaman web, tetapi kesannya terhadap prestasi adalah berbeza. Artikel ini akan memperkenalkan lukis semula dan aliran semula dari segi teori dan contoh kod, dan membincangkan secara mendalam peringkat pemaparan mana yang lebih terjejas.

Pertama, mari kita fahami definisi lukis semula dan aliran semula. Melukis semula bermakna apabila gaya elemen berubah tanpa menjejaskan reka letaknya, penyemak imbas akan menggunakan gaya baharu pada elemen dan melukisnya semula. Reflow bermaksud apabila saiz, reka letak atau gaya sesuatu elemen berubah, penyemak imbas akan mengira semula sifat geometri elemen dan susun atur semula halaman. Redraw berlaku selepas reflow, jadi reflow mencetuskan redraw.

Jadi, yang manakah mempunyai impak yang lebih besar pada prestasi pemaparan, lukisan semula atau pengaliran semula? Jawapannya ialah reflow. Reflow adalah lebih kompleks daripada operasi lukis semula kerana ia memerlukan pengiraan semula maklumat reka letak dan mungkin menyebabkan elemen lain yang berkaitan disusun semula. Ini bermakna overhed aliran semula adalah lebih besar dan kesan ke atas prestasi lebih jelas.

Di bawah kami menggunakan contoh kod khusus untuk menggambarkan lukisan semula dan aliran semula serta perbezaan impaknya.

Pertama, kami mencipta struktur HTML ringkas yang mengandungi butang dan kotak teks.

<!DOCTYPE html>
<html>
  <head>
    <style>
      .button {
        width: 100px;
        height: 30px;
        background-color: blue;
        color: white;
      }
      .text-field {
        width: 200px;
        height: 30px;
        border: 1px solid black;
        padding: 5px;
      }
    </style>
  </head>
  <body>
    <button class="button">按钮</button>
    <input class="text-field" type="text" placeholder="请输入文本">
  </body>
</html>

Salin selepas log masuk

Seterusnya, kami menggunakan JavaScript untuk menukar warna butang. Kami menulis dua keping kod masing-masing, satu yang hanya menukar warna butang dan satu yang menukar warna kedua-dua butang dan kotak teks.

Kod yang hanya menukar warna butang kelihatan seperti ini:

var button = document.querySelector('.button');
button.style.backgroundColor = 'red';

Salin selepas log masuk

Kod yang menukar warna kedua-dua butang dan kotak teks kelihatan seperti ini:

var button = document.querySelector('.button');
var textField = document.querySelector('.text-field');
button.style.backgroundColor = 'red';
textField.style.backgroundColor = 'green';

Salin selepas log masuk

Jalankan dua keping kod ini dan gunakan penyemak imbas anda alat pembangun untuk melihat keadaan lukis semula dan aliran semula.

Dapat diperhatikan bahawa kod yang hanya menukar warna butang hanya mencetuskan operasi lukis semula, manakala kod yang menukar warna butang dan kotak teks pada masa yang sama bukan sahaja mencetuskan lukisan semula, tetapi juga mencetuskan operasi pengaliran semula. Ini kerana menukar warna kedua-dua butang dan kotak teks menyebabkan reka letaknya berubah, jadi penyemak imbas perlu melakukan pengiraan aliran semula.

Adalah jelas daripada contoh ini bahawa operasi aliran semula adalah lebih mahal daripada operasi lukis semula. Oleh itu, dalam pengoptimuman prestasi, kita harus cuba mengurangkan bilangan aliran semula sebanyak mungkin. Amalan biasa ialah menggunakan CSS untuk operasi kelompok, seperti menukar nama kelas CSS untuk mengubah suai gaya berbilang elemen sekaligus, dengan itu mengurangkan bilangan aliran semula.

Ringkasnya, lukis semula dan aliran semula adalah konsep penting dalam fasa pemaparan, tetapi aliran semula mempunyai kesan yang lebih besar pada prestasi. Dalam proses pembangunan sebenar, kita harus cuba mengurangkan bilangan aliran semula untuk meningkatkan prestasi pemaparan halaman web.

Ringkasan:

Melukis semula bermaksud apabila gaya sesuatu elemen berubah, penyemak imbas akan melukis semula elemen tersebut.
Reflow bermaksud apabila saiz, reka letak atau gaya sesuatu elemen berubah, penyemak imbas akan mengira semula sifat geometri elemen dan menyusun semula halaman.
Reflow adalah lebih kompleks daripada melukis semula dan mempunyai kesan yang lebih jelas terhadap prestasi.
Dalam pengoptimuman prestasi, bilangan aliran semula harus diminimumkan Anda boleh menggunakan CSS untuk melaksanakan operasi kelompok untuk mengurangkan aliran semula.

Atas ialah kandungan terperinci Memahami lukis semula dan aliran semula: peringkat pemaparan yang manakah lebih terjejas?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!