Apakah reflow dalam javascript

Dalam JavaScript, reflow juga dipanggil reflow, yang merujuk kepada proses di mana penyemak imbas memaparkan semula sebahagian atau semua DOM apabila sebahagian atau semua pepohon rendering berubah disebabkan perubahan dalam saiz elemen, reka letak , bersembunyi, dsb. ; Secara ringkasnya, ia bermaksud memformat semula keseluruhan halaman.

Persekitaran pengendalian tutorial ini: sistem Windows 7, versi JavaScript 1.8.5, komputer Dell G3.

Pengenalan ringkas kepada proses pemaparan penyemak imbas (gambar dari Internet)

Proses penyemak imbas menjana pokok rendering (gambar dari Internet)

Reflow

Apabila pepohon pemaparan Proses pelayar memaparkan semula sebahagian atau semua DOM apabila sebahagian atau semua saiz elemen, reka letak, persembunyian, dsb. berubah.

Reflow juga dipanggil reflow Sebenarnya, secara literal, reflow lebih mudah difahami (iaitu, reflow seluruh halaman).

Lukis Semula

Apabila gaya elemen halaman tidak menjejaskan kedudukan elemen dalam aliran dokumen (seperti warna latar belakang, warna sempadan, keterlihatan), penyemak imbas hanya akan menetapkan yang baharu elemen gaya dan cat semula.

Bilakah aliran semula atau lukis semula akan dicetuskan?

Terdapat sejumlah besar tindakan pengguna dan kemungkinan perubahan DHTML yang boleh mencetuskan aliran semula. Contohnya, tukar saiz tetingkap penyemak imbas, gunakan beberapa kaedah JavaScript, termasuk mengira gaya, menambah atau mengalih keluar elemen pada DOM atau menukar kelas elemen, dsb.

添加或者删除可见的DOM元素；
元素位置改变；
元素尺寸改变——边距、填充、边框、宽度和高度；
内容变化，比如用户在input框中输入文字，文本或者图片大小改变而引起的计算值宽度和高度改变；
页面渲染初始化；
浏览器窗口尺寸改变，resize事件发生时；
计算offsetWidth和offsetHeight属性；
设置style属性的值；

Reflow pasti akan menyebabkan redraw, tetapi redraw tidak semestinya menyebabkan reflow.

Bagaimana untuk mengurangkan aliran semula dan lukis semula?

1. Elakkan aliran semula dan lukis semula dalam CSS

1 Tukar kelas di hujung pepohon DOM sebanyak mungkin
2 >3. Kesan animasi digunakan pada elemen yang atribut kedudukannya adalah mutlak atau tetap
4. Elakkan menggunakan reka letak jadual
5. Gunakan pecutan perkakasan css3 untuk mengelakkan kesan animasi seperti perubahan, kelegapan dan penapis daripada menyebabkan aliran semula dan melukis semula

2. Operasi JS untuk mengelakkan aliran semula dan lukis semula

1 Elakkan menggunakan JS untuk mengubah suai satu gaya dan kemudian menukar gaya seterusnya, atau takrifkan senarai gaya sebagai Nama kelas

2. Elakkan operasi DOM yang kerap, gunakan serpihan dokumen untuk mencipta subpokok, dan kemudian salin ke dokumen
3. Sembunyikan elemen dahulu, ubah suai dan kemudian paparkan elemen , kerana operasi DOM pada paparan:none Tidak akan menyebabkan aliran semula dan lukis semula
4 Elakkan gelung untuk membaca atribut seperti offsetLeft dan simpannya sebelum menggelung
5 Untuk kesan animasi yang kompleks, gunakan kedudukan mutlak untuk memisahkannya aliran dokumen, jika tidak, ia akan menyebabkan induk Sebilangan besar elemen aliran semula dan elemen seterusnya

Ringkasan:

Reflow ialah operasi terarah pengguna dalam penyemak imbas, jadi anda tahu cara untuk menambah baik masa aliran semula dan mengetahui pelbagai atribut dokumen (nod DOM Kesan kedalaman, kecekapan pemaparan CSS, pelbagai perubahan gaya) pada masa aliran semula sangat membantu untuk pembangunan bahagian hadapan. Kadangkala aliran semula satu elemen mungkin memerlukan elemen induknya dan mana-mana elemen berikut juga dialirkan semula. Sebagai contoh, jika anda perlu menukar latar belakang elemen, ini tidak melibatkan atribut elemen, jadi hanya lukisan semula berlaku.

[Pembelajaran yang disyorkan:

Tutorial JavaScript Lanjutan]

Atas ialah kandungan terperinci Apakah reflow dalam javascript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!