Saat kami mengembangkan Aplikasi Internet Kaya (RIA), kami sering menulis beberapa skrip javascript untuk mengubah atau menambahkan elemen halaman. Tugas-tugas ini pada akhirnya diselesaikan oleh DOM - atau Model Objek Dokumen - dan metode implementasi kami akan memengaruhi kecepatan respons aplikasi.
Operasi DOM akan menyebabkan browser melakukan parsing ulang (reflow), yaitu proses perhitungan browser yang menentukan bagaimana elemen halaman ditampilkan. Memodifikasi DOM secara langsung, mengubah gaya CSS suatu elemen, atau mengubah ukuran jendela browser akan memicu penguraian ulang. Membaca properti tata letak elemen seperti offsetHeithe atau offsetWidth juga akan memicu penguraian ulang. Penguraian ulang memerlukan waktu komputasi, jadi semakin sedikit penguraian ulang yang dipicu, semakin cepat aplikasi akan berjalan.
Operasi DOM biasanya mengubah elemen halaman yang ada atau membuat elemen halaman baru. Empat solusi pengoptimalan berikut mencakup dua metode memodifikasi dan membuat node DOM, membantu Anda mengurangi frekuensi pemicu penguraian ulang browser.
Solusi 1: Ubah DOM dengan mengganti nama kelas CSS
Solusi ini memungkinkan kita untuk memodifikasi beberapa atribut gaya suatu elemen dan elemen turunannya sekaligus dan hanya memicu satu penguraian ulang.
membutuhkan:
( catatan emu : Penulis artikel asli jelas mengalami korsleting di otaknya ketika dia menulis ini, dan meletakkan masalah yang harus diselesaikan dalam mode Manipulasi DOM Out-of-the-flow berikutnya di sini. Namun, itu adalah mudah dipahami penulis dari kode demonstrasi. Masalahnya sangat ingin saya jelaskan, jadi emu tidak akan mereproduksi teks aslinya)
Kita sekarang perlu menulis fungsi untuk mengubah beberapa aturan gaya hyperlink. Penerapannya sangat sederhana, cukup ubah atribut yang sesuai dengan aturan ini satu per satu. Namun masalahnya adalah setiap kali atribut style diubah, hal itu akan menyebabkan halaman diurai ulang.
fungsi selectAnchor(elemen) {
elemen.style.fontWeight = 'tebal';
elemen.style.textDecoration = 'tidak ada';
elemen.gaya.warna = '#000';
}
Larutan:
Untuk mengatasi masalah ini, pertama-tama kita dapat membuat nama gaya dan meletakkan semua aturan gaya yang akan diubah pada nama kelas ini, kemudian kita menambahkan nama kelas baru ini ke hyperlink, sehingga kita dapat menambahkan beberapa aturan gaya dan hanya reparse saja terpicu. Keuntungan lain dari model ini adalah ia juga mencapai pemisahan kinerja dan logika.
.selectedAnchor {
berat font: tebal;
dekorasi teks: tidak ada;
warna: #000;
}
fungsi selectAnchor(elemen) {
elemen.className = 'selectedAnchor';
}