Artikel ini menjelaskan metode JS untuk mencegah flashing ketika tata letak div menggulir, dan dibagikan kepada Anda untuk referensi Anda. Metode spesifiknya adalah sebagai berikut:
Saya telah terkena kinerja halaman baru -baru ini, dan ada banyak konten yang halus dan asli, seperti rendering browser. Ada banyak informasi, jadi saya memilih beberapa untuk terjemahan dan memorandum.
Javascript menulis dan membaca DOM beberapa kali dan menyebabkan "tata letak tata letak" terjadi, menyebabkan dokumen mencerminkan proses membangun pohon render
Salinan kode adalah sebagai berikut: dari dom tree1).
// membaca
var h1 = elemen1.clientHeight;
// tulis (tata letaknya tidak valid)
element1.style.height = (h1 * 2) + 'px';
// baca (rilis sentuh)
var h2 = element2.clientHeight;
// tulis (tata letaknya tidak valid)
element2.style.height = (h2 * 2) + 'px';
// baca (rilis sentuh)
var h3 = elemen3.clientHeight;
// tulis (tata letaknya tidak valid)
elemen3.style.height = (h3 * 2) + 'px';
Ketika DOM ditulis, tata letak tidak valid dan perlu disusun ulang pada titik waktu tertentu. Tapi browsernya malas, dan ingin menunggu sampai operasi saat ini (atau bingkai) selesai sebelum pengaturan ulang.
Namun, jika kita membaca nilai geometris dari DOM sebelum akhir operasi saat ini (atau bingkai), maka kita memaksa browser untuk mengatur ulang tata letak terlebih dahulu. Ini disebut "tata letak sinkron yang dipaksakan", yang akan membunuh kinerja.
Pada browser desktop modern, efek samping tata letak bergelombang mungkin tidak jelas; Tetapi pada perangkat seluler kelas bawah, masalahnya serius.
Solusi cepat
Di dunia yang ideal, kita dapat membaca dan menulis DOM dalam batch dengan hanya mengatur ulang urutan eksekusi kode. Ini berarti bahwa dokumen perlu disesuaikan kembali dalam sekali jalan.
Salin kode sebagai berikut:/ Baca
var h1 = elemen1.clientHeight;
var h2 = element2.clientHeight;
var h3 = elemen3.clientHeight;
// tulis (tata letaknya tidak valid)
element1.style.height = (h1 * 2) + 'px';
element2.style.height = (h2 * 2) + 'px';
elemen3.style.height = (h3 * 2) + 'px';
// Dokumen disusun ulang di ujung bingkai
Jadi bagaimana dengan dunia nyata?
Ini tidak sesederhana itu dalam kenyataan. Dalam program besar, kode tersebar di mana -mana, dan ada DOM yang berbahaya. Kami tidak dapat dengan mudah (dan jelas tidak seharusnya) mencampur kode kami yang indah dan de-core bersama hanya untuk mengontrol perintah eksekusi. Jadi untuk mengoptimalkan kinerja, bagaimana cara membaca dan menulis?
Mengenal frame requestanimation
window.requestanimationFrame menjadwalkan fungsi yang akan dieksekusi di bingkai berikutnya, mirip dengan settimout (fn, 0). Ini sangat berguna karena kita dapat menggunakannya untuk menjadwalkan semua operasi penulisan dom untuk dieksekusi bersama dalam frame berikutnya, dan operasi membaca DOM akan dieksekusi secara serempak dalam urutan saat ini.
Salin kode sebagai berikut:/ Baca
var h1 = elemen1.clientHeight;
// Menulis
requestanimationframe (function () {
element1.style.height = (h1 * 2) + 'px';
});
// membaca
var h2 = element2.clientHeight;
// Menulis
requestanimationframe (function () {
element2.style.height = (h2 * 2) + 'px';
});
...
Saya berharap deskripsi dalam artikel ini akan bermanfaat untuk pemrograman web semua orang berdasarkan JavaScript.