Perbandingan penggunaan prestasi: Yang manakah menggunakan lebih banyak sumber, aliran semula atau lukis semula?-html tutorial-php.cn

Perbandingan penggunaan prestasi: Yang manakah menggunakan lebih banyak sumber, aliran semula atau lukis semula?

WBOY

Lepaskan： 2024-01-26 09:31:05

asal

1137 orang telah melayarinya

Perbandingan penggunaan prestasi: Yang manakah menggunakan lebih banyak sumber, aliran semula atau lukis semula?

Reflow vs. redraw: Mana satu yang menggunakan lebih banyak prestasi?

Dalam pembangunan bahagian hadapan, pengoptimuman prestasi ialah isu penting. Salah satu kesesakan prestasi ialah operasi pengaliran semula dan pengecatan semula penyemak imbas. Dalam artikel ini, kami akan meneroka definisi aliran semula dan lukis semula dan membandingkan penalti prestasi mereka dengan contoh kod konkrit.

Reflow merujuk kepada proses di mana penyemak imbas mengira semula kedudukan dan sifat geometri elemen halaman. Apabila reka letak berubah atau atribut gaya berubah, penyemak imbas perlu mengira semula kedudukan dan saiz elemen Proses ini dipanggil aliran semula. Pengaliran semula akan menyebabkan keseluruhan pokok rendering dibina semula, yang sangat memakan prestasi.

Melukis semula merujuk kepada proses di mana penyemak imbas melukis semula elemen berdasarkan pengiraan gaya terkini tanpa menjejaskan reka letak. Melukis semula tidak menyebabkan perubahan reka letak, ia hanya mempengaruhi gaya elemen. Walau bagaimanapun, proses lukisan semula masih memerlukan melintasi dan melukis semula elemen, jadi terdapat juga kehilangan prestasi tertentu.

Untuk lebih memahami perbezaan prestasi antara reflow dan redraw, kami akan mengujinya dengan contoh kod berikut. Katakan kita mempunyai halaman yang mengandungi 1000 elemen div, setiap div mempunyai gaya dengan nama kelas "kotak".

<!DOCTYPE html>
<html>
<head>
  <style>
    .box {
      width: 100px;
      height: 100px;
      background-color: red;
      margin: 10px;
    }
  </style>
</head>
<body>
  <div id="container">
    <!-- 1000个div -->
  </div>

  <script>
    // 创建1000个div元素
    for (let i = 0; i < 1000; i++) {
      const div = document.createElement('div');
      div.classList.add('box');
      document.getElementById('container').appendChild(div);
    }

    // 添加一个scroll事件监听器
    window.addEventListener('scroll', function() {
      // 修改样式属性
      document.getElementById('container').style.backgroundColor = 'blue';
    });
  </script>
</body>
</html>

Salin selepas log masuk

Dalam kod di atas, kami mencipta 1000 elemen div dengan "kotak" kelas dan menambah pendengar acara tatal. Semasa halaman menatal, kami akan mengubah suai warna latar belakang bekas yang mengandungi elemen div ini.

Mari kita perhatikan kehilangan prestasi aliran semula dan lukis semula melalui alatan pembangun penyemak imbas.

Mula-mula, kami klik pada bar skrol dalam halaman untuk menatal. Pada setiap acara tatal, penyemak imbas perlu melakukan operasi aliran semula untuk mengira semula kedudukan dan susun atur elemen. Melalui alat pemapar penyemak imbas, kita dapat melihat berapa lama operasi aliran semula itu diambil.

Seterusnya, kami terus mengklik pada bar skrol untuk menatal, dan hanya melakukan operasi lukis semula pada masa ini. Melalui alat pemapar penyemak imbas, kita dapat melihat berapa lama operasi lukis semula diambil.

Selepas ujian, kita boleh membuat kesimpulan bahawa operasi aliran semula adalah lebih intensif prestasi daripada operasi lukis semula. Kerana operasi aliran semula memerlukan pengiraan semula kedudukan dan susun atur elemen, manakala operasi lukis semula hanya memerlukan lukisan semula gaya elemen.

Dalam proses pembangunan sebenar, kita harus cuba mengelakkan operasi aliran semula yang kerap kerana ia akan membawa kepada kemerosotan prestasi. Kaedah pengoptimuman ialah menggunakan atribut transformasi CSS untuk menggantikan perubahan atribut gaya, yang boleh mengurangkan kekerapan aliran semula.

Ringkasnya, reflow dan redraw ialah dua konsep penting dalam proses pemaparan penyemak imbas. Aliran semula adalah lebih intensif prestasi berbanding lukisan semula kerana aliran semula memerlukan pengiraan semula kedudukan dan susun atur elemen. Dalam pembangunan sebenar, kita harus cuba mengurangkan kekerapan aliran semula untuk meningkatkan prestasi halaman.

Atas ialah kandungan terperinci Perbandingan penggunaan prestasi: Yang manakah menggunakan lebih banyak sumber, aliran semula atau lukis semula?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!