Analisis kesan aliran semula CSS dan lukis semula pada prestasi

Untuk memahami kesan aliran semula dan lukis semula CSS pada prestasi, contoh kod khusus diperlukan

Aliran semula dan lukis semula CSS ialah konsep yang sangat penting dalam pengoptimuman prestasi halaman web Penggunaan CSS yang betul boleh mengurangkan aliran semula dan lukis semula halaman, serta menambah baik prestasi halaman. Artikel ini akan memperkenalkan konsep pengaliran semula dan pengecatan semula CSS dan cara mengelakkan kesannya terhadap prestasi, dan memberikan contoh kod khusus.

1. Apakah reflow dan redraw?

Reflow bermaksud apabila saiz, kedudukan atau atribut tertentu elemen DOM berubah, penyemak imbas mengira semula atribut geometri elemen lain mungkin berubah kedudukannya disebabkan perubahan elemen ini. Proses ini dipanggil refluks.

Cat semula bermaksud apabila gaya elemen DOM berubah tanpa menjejaskan sifat geometrinya, penyemak imbas akan melukis semula elemen tersebut.

2. Kesan reflow dan redraw

Reflow dan redraw adalah operasi yang memakan prestasi. Apabila elemen dalam halaman sering dialirkan semula dan dilukis semula, kelajuan pemaparan halaman akan menjadi perlahan dan prestasi halaman juga akan berkurangan. Oleh itu, memahami sebab aliran semula dan lukis semula serta mengelakkan operasi aliran semula dan lukis semula yang tidak perlu boleh meningkatkan prestasi halaman. . .

Kod contoh:

CSS:

1. .red {
     color: red;
   }

   Salin selepas log masuk
JavaScript:

const element = document.getElementById('element');
element.classList.add('red');

Mengubah suai gaya elemen berbilang kali dan akan menghasilkan berbilang aliran semula. Jika anda perlu mengubah suai berbilang gaya, anda boleh mengubah suai semuanya serentak dengan menambahkan Kelas.

Contoh kod:

CSS:

2. .red {
     color: red;
     background-color: yellow;
   }

   Salin selepas log masuk
JavaScript:

const element = document.getElementById('element');
element.classList.add('red');

Penggunaan pertanyaan DOM yang kerap dalam kod akan mencetuskan aliran semula. Jika anda perlu menanyakan atribut elemen DOM beberapa kali, anda boleh cache dalam pembolehubah untuk mengelakkan operasi aliran semula berulang.

Kod sampel:

JavaScript:

3. const element = document.getElementById('element');
   const width = element.offsetWidth;
   const height = element.offsetHeight;

   Salin selepas log masuk

Apabila anda perlu kerap mengendalikan nod DOM, anda boleh menggunakan DocumentFragment untuk pemprosesan batch dan redraw.

Contoh kod:

JavaScript:

4. const fragment = document.createDocumentFragment();
   for (let i = 0; i < 1000; i++) {
     const div = document.createElement('div');
     fragment.appendChild(div);
   }
   document.body.appendChild(fragment);

   Salin selepas log masuk
IV Ringkasan

Aliran semula dan lukisan semula mempunyai kesan yang besar pada prestasi halaman Melalui penulisan dan pengoptimuman kod CSS yang munasabah, bilangan aliran semula dan lukisan semula boleh dikurangkan dan halaman boleh dikurangkan. dipertingkatkan. Semasa proses pembangunan, anda perlu memberi perhatian untuk mengelakkan operasi DOM yang kerap, cuba gunakan Kelas dan bukannya atribut gaya, dan cache maklumat susun atur nod DOM. Melalui langkah-langkah di atas, anda boleh meningkatkan prestasi halaman dengan berkesan dan meningkatkan pengalaman pengguna.

Atas ialah kandungan terperinci Analisis kesan aliran semula CSS dan lukis semula pada prestasi. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!