js untuk menghalang susun atur DIV daripada berkelip apabila kemahiran menatal_javascript

Contoh dalam artikel ini menerangkan kaedah js untuk menghalang reka letak DIV daripada berkelip apabila menatal, dan saya ingin berkongsi dengan anda untuk rujukan anda. Kaedah khusus adalah seperti berikut:

Perkara yang saya telah didedahkan baru-baru ini tentang prestasi halaman termasuk banyak kandungan halus dan asli, seperti pemaparan penyemak imbas. Terdapat banyak maklumat, jadi saya memilih beberapa untuk petikan dan memo.
Apabila JavaScript menulis dan membaca DOM beberapa kali, "layout thrashing" akan berlaku, menyebabkan pengaliran semula dokumen (reflow – proses membina pepohon render

Salin kod Kod adalah seperti berikut:

daripada pokok DOM1).
// Baca
var h1 = element1.clientHeight;
// Tulis (reka letak tidak sah)
element1.style.height = (h1 * 2) 'px';
// Baca (letak letak pencetus)
var h2 = element2.clientHeight;
// Tulis (reka letak tidak sah)
element2.style.height = (h2 * 2) 'px';
// Baca (letak letak pencetus)
var h3 = element3.clientHeight;
// Tulis (reka letak tidak sah)
element3.style.height = (h3 * 2) 'px';

Apabila DOM ditulis, reka letak tidak sah dan perlu disusun semula pada masa tertentu. Tetapi pelayar sangat malas, ia mahu menunggu sehingga penghujung operasi semasa (atau bingkai) sebelum mengalir semula.
Walau bagaimanapun, jika kita membaca nilai geometri dari DOM sebelum penghujung operasi semasa (atau bingkai), maka kita akan memaksa pelayar untuk menyusun semula susun atur terlebih dahulu Ini adalah apa yang dipanggil "susun atur segerak paksa", yang akan Ia membunuh prestasi.
Pada penyemak imbas desktop moden, kesan sampingan meronta-ronta reka letak mungkin tidak jelas, tetapi pada peranti mudah alih rendah, masalahnya adalah serius.

Penyelesaian pantas

Dalam dunia yang ideal, kita boleh membaca DOM dan menulis DOM dalam kelompok dengan hanya menyusun semula susunan pelaksanaan kod. Ini bermakna dokumen itu hanya perlu dialirkan semula sekali.

Salin kod Kod adalah seperti berikut:

// Baca
var h1 = element1.clientHeight;
var h2 = element2.clientHeight;
var h3 = element3.clientHeight;
// Tulis (reka letak tidak sah)
element1.style.height = (h1 * 2) 'px';
element2.style.height = (h2 * 2) 'px';
element3.style.height = (h3 * 2) 'px';
// Pengaliran semula dokumen pada hujung bingkai

Bagaimana dengan dunia sebenar?

Sebenarnya ia tidak semudah itu. Dalam program besar, kod tersebar di mana-mana, dan DOM berbahaya ini wujud di mana-mana. Kami tidak boleh dengan mudah (dan jelas sekali tidak) menguli kod kami yang cantik dan dipisahkan bersama hanya untuk mengawal susunan pelaksanaan. Jadi untuk mengoptimumkan prestasi, bagaimana kita membatch membaca dan menulis?

Memenuhi permintaanAnimationFrame

window.requestAnimationFrame menjadualkan fungsi untuk dilaksanakan dalam bingkai seterusnya, serupa dengan setTimout(fn, 0). Ini sangat berguna kerana kita boleh menggunakannya untuk menjadualkan semua operasi tulis DOM untuk dilaksanakan bersama dalam bingkai seterusnya dan operasi baca DOM untuk dilaksanakan serentak dalam susunan semasa.

Salin kod Kod adalah seperti berikut:

// Baca
var h1 = element1.clientHeight;
// tulis
requestAnimationFrame(function() {
element1.style.height = (h1 * 2) 'px';
});
// Baca
var h2 = element2.clientHeight;
// tulis
requestAnimationFrame(function() {
element2.style.height = (h2 * 2) 'px';
});
……

Saya harap artikel ini akan membantu pengaturcaraan web semua orang berdasarkan JavaScript.