Penjelasan terperinci tentang penggunaan Cat Semula dan Aliran Semula dalam pengetahuan JavaScript_Basic

Adakah anda sering mendengar daripada senior atau beberapa senior front-end bahawa anda tidak boleh menggunakan kad bebas CSS *, susunan pemilih CSS tidak boleh melebihi tiga tahap, gunakan pemilih kelas sebanyak mungkin dalam CSS, kurangkan penggunaan jadual semasa menulis HTML, dan struktur harus semudah mungkin - pokok DOM Menunggu nasihat ini, saya secara kasarnya tahu bahawa menggunakan kad bebas atau terlalu banyak tahap pemilih CSS boleh mengurangkan prestasi Mengenai mengapa saya tidak menggunakan teg jadual, saya sentiasa keliru, jadi saya hanya mengikut itu, tetapi saya Selepas mengenali Repain dan Reflow, ternyata ini benar-benar tidak boleh digunakan terlalu banyak. ok, saya harap artikel ini dapat membantu anda!

1. Apakah itu Repaint/Reflow?

Baiklah, mari ambil gambar dahulu: aliran kerja umum penghuraian penyemak imbas

Gambar ini hendaklah mudah difahami dan boleh diringkaskan kepada empat langkah:

1. Menghuraikan HTML untuk membina pepohon DOM: Enjin pemaparan mula menghuraikan dokumen HTML dan menukar teg html dalam pepohon atau teg yang dijana oleh js kepada nod DOM, yang dipanggil -- pepohon kandungan.
2. Bina pepohon pemaparan: huraikan CSS (termasuk fail CSS luaran dan elemen gaya serta gaya yang dijana oleh js), kira gaya nod berdasarkan pemilih CSS dan cipta pepohon lain - pepohon pemaparan.
3. Pepohon pemaparan reka letak: Dipanggil secara rekursif daripada nod akar, kira saiz, kedudukan, dsb. setiap elemen dan berikan setiap nod koordinat tepat di mana ia sepatutnya muncul pada skrin.
4. Lukis pepohon pemaparan: Lintas pepohon pemaparan, dan setiap nod akan dilukis menggunakan lapisan hujung belakang UI.

Baiklah, kita dapat melihat bahawa Repain dan Reflow masing-masing muncul dalam langkah ketiga dan keempat. Oleh itu kami memberikan definisi berikut:

Setiap elemen dalam struktur DOM mempunyai kotak (model) sendiri, yang memerlukan penyemak imbas mengira mengikut pelbagai gaya (pelayar, pemaju-defined, dll.) dan meletakkan elemen di dalamnya mengikut hasil pengiraan Proses ini dipanggil aliran semula; apabila kedudukan, saiz dan atribut lain dari pelbagai kotak, seperti warna, saiz fon, dsb., ditentukan, penyemak imbas menarik elemen ini mengikut ciri masing-masing , jadi kandungan halaman muncul, ini proses dipanggil mengecat semula.
Dapat dilihat bahawa kedua-dua perkara ini sangat penting untuk penyemak imbas untuk memaparkan halaman, dan ia akan menjejaskan prestasi Oleh itu, kita perlu memahami beberapa operasi biasa yang akan menyebabkan pengecatan semula dan pengaliran semula, dan ia harus diminimumkan untuk menambah baik. kelajuan rendering.

2. Beberapa operasi yang menyebabkan Repain dan Reflow

Kos Reflow jauh lebih tinggi daripada Kos Mengecat Semula. Setiap nod dalam Pokok DOM akan mempunyai kaedah aliran semula Aliran semula nod berkemungkinan membawa kepada pengaliran semula nod anak, malah nod induk dan nod adik beradik. Ia mungkin tidak mengapa pada sesetengah komputer berprestasi tinggi, tetapi jika aliran semula berlaku pada telefon mudah alih, prosesnya sangat menyakitkan dan memakan kuasa.
Oleh itu, tindakan berikut mungkin agak mahal.

• Apabila anda menambah, memadam atau mengubah suai nod DOM, ia akan menyebabkan Aliran Semula atau Cat Semula.
• Apabila anda mengalihkan kedudukan DOM atau mencipta animasi.
• Apabila anda mengubah suai gaya CSS.
• Apabila anda mengubah saiz tetingkap (versi mudah alih tidak mempunyai masalah ini), atau semasa menatal.
• Apabila anda mengubah suai fon lalai halaman web.

Nota: paparan: tiada yang akan mencetuskan aliran semula, manakala visibility:hidden hanya akan mencetuskan pengecatan semula kerana tiada perubahan kedudukan ditemui.
3. Bagaimana untuk mengoptimumkan?

Reflow tidak dapat dielakkan, dan kesan Reflow pada prestasi hanya boleh diminimumkan Berikut ialah beberapa cadangan:

Jangan ubah suai gaya DOM satu persatu. Daripada melakukan ini, adalah lebih baik untuk mentakrifkan kelas css dan kemudian mengubah suai DOM className:

 // 不好的写法
  var left = 10,
  top = 10;
  el.style.left = left + "px";
  el.style.top = top + "px";
  // 推荐写法
  el.className += " theclassname";

Ubah suai DOM selepas mengambilnya di luar talian. Seperti:
a> Gunakan objek documentFragment untuk mengendalikan DOM dalam ingatan.
b> Mula-mula berikan paparan DOM:none (satu cat semula), dan kemudian anda boleh menukarnya mengikut kehendak anda. Contohnya, ubah suai 100 kali dan kemudian paparkan semula.
c> Mengklonkan nod DOM ke dalam memori, dan kemudian menukarnya mengikut cara yang anda mahu Selepas perubahan selesai, tukarkannya dengan yang dalam talian.

Jangan letakkan nilai atribut nod DOM dalam gelung sebagai pembolehubah dalam gelung. Jika tidak, ini akan menghasilkan sejumlah besar bacaan dan penulisan bagi atribut nod.

Ubah suai nod DOM peringkat rendah sebanyak mungkin. Sudah tentu, menukar nod DOM peringkat rendah boleh menyebabkan kawasan pengaliran semula yang besar, tetapi kesannya juga mungkin kecil.

Jika anda menggunakan kedudukan tetap atau absoult untuk elemen HTML animasi, mengubah suai CSS mereka akan mengurangkan aliran semula dengan banyak.

Jangan sekali-kali menggunakan susun atur meja. Kerana perubahan kecil boleh menyebabkan keseluruhan jadual disusun semula.

Selepas memahami perkara ini, adakah anda lebih berminat dengan prinsip penyemak imbas? OK, saya akan mengemas kini artikel tentang prinsip penyemak imbas kemudian, atau anda boleh mencari yang lain terlebih dahulu, kerana saya fikir adalah sangat penting untuk memahami prinsip penyemak imbas, yang boleh membantu kami menulis tapak web dengan prestasi yang lebih baik.