Mengakses elemen DOM datang dengan biaya, dan memodifikasi elemen DOM bahkan lebih mahal karena menyebabkan browser menghitung ulang perubahan geometris halaman.
Tentu saja, kasus terburuk adalah mengakses elemen yang dimodifikasi dalam loop, terutama operasi loop pada koleksi elemen HTML.
Misalnya:
Salinan kode adalah sebagai berikut:
<!-Sebelum optimasi->
<type skrip = "Teks/JavaScript">
function innerHtmlLoop () {
untuk (var count = 0; count <15000; count ++) {
document.geteLementById ('here'). innerHtml+= 'a';
}
}
</script>
Fungsi ini loop untuk memodifikasi konten elemen halaman. Masalah dengan kode ini adalah bahwa setiap iterasi loop, elemen diakses dua kali: Setelah membaca properti InnerHTML dan setelah menulis ulang.
Pendekatan yang lebih efisien adalah menggunakan variabel lokal untuk menyimpan konten yang diperbarui dan kemudian menulisnya sekaligus setelah loop berakhir:
Salinan kode adalah sebagai berikut:
<!-Setelah optimasi->
<type skrip = "Teks/JavaScript">
function innerHtmlLoop () {
var content = '';
untuk (var count = 0; count <15000; count ++) {
konten+= 'a';
}
document.geteLementById ('here'). innerHtml+= konten;
}
</script>
Semakin banyak Anda mengakses DOM, semakin lambat kode berjalan. Oleh karena itu, ketika ada solusi lain untuk menggantinya, kami harus mencoba meminimalkan jumlah kunjungan ke DOM.