Halo Sob! Kamu para Web Developer pasti sudah tidak asing dengan istilah DOM kan? DOM sendiri sering diabaikan dalam praktiknya karena kita tidak berurusan langsung dengannya saat melakukan development (detail implementasinya ada pada masing-masing browser), tapi tidak ada salahnya kita mengenalnya secara lebih mendalam.
Apa itu DOM?DOM (document object model) adalah suatu cara yang digunakan untuk merepresentasikan document melalui node dan objek, sehingga document tersebut dapat diubah struktur, style, dan isinya. Tampilan halaman web atau source code yang kita lihat pada developer tools saat melakukan inspect element pada browser adalah bentuk implementasi dari DOM.
JavaScript dan DOM
Dalam spesifikasinya DOM adalah platform yang tidak terikat pada bahasa pemograman tertentu. Tetapi kenyataannya hanya bahasa pemograman JavaScript yang digunakan untuk melakukan manipulasi DOM pada browser.
Pada Konteks ini untuk meningkatkan performa sebuah website yang akan dibangun, para developer harus memperhatikan ukuran DOM yang tidak berlebihan. DOM tree dapat merusak kinerja pada laman website diantaranya :
- Efisiensi jaringan dan kinerja beban. Jika server kamu mengirim DOM tree besar, kamu mungkin mengirim banyak byte yang tidak perlu. Ini juga dapat memperlambat waktu pemuatan halaman, karena browser mungkin mem-parsing banyak node yang bahkan tidak ditampilkan di atas-the-fold.
- Kinerja runtime. Ketika pengguna dan skrip berinteraksi dengan halaman kamu, browser harus secara konstan menghitung ulang posisi dan gaya node. DOM tree besar dalam kombinasi dengan aturan gaya yang rumit dapat sangat memperlambat rendering.
- Kinerja memori. Jika kamu menggunakan penyeleksi kueri umum seperti document.querySelectorAll (‘li’), kamu mungkin secara tidak sadar menyimpan referensi ke sejumlah besar node, yang dapat membanjiri kemampuan memori perangkat pengguna kamu.
Nah dari sini kamu dapat melihat bahwa sebuah DOM tree yang optimal untuk website yang dibangun harus memiliki ciri-ciri :
- Memiliki total kurang dari 1500 node.
- Memiliki kedalaman maksimum 32 node.
- Tidak memiliki parent node dengan lebih dari 60 child node
Secara garis besarnya mencari cara untuk membuat node DOM hanya jika diperlukan, dan destroy DOM ketika tidak lagi diperlukan.
Jika server mengirim DOM tree besar, coba muat halaman kamu dan perhatikan secara manual node mana yang ditampilkan. Mungkin dapat menghapus node yang tidak ditampilkan dari dokumen yang dimuat, dan hanya membuatnya setelah gerakan pengguna, seperti gulir atau klik tombol.
Simak terus Tips Hosting di halaman tutorial Jagoan Hosting Indonesia ya, jika ada bagian dari tutorial yang tidak ditemukan, kamu bisa menghubungi teman-teman di Jagoan Hosting supaya bisa dibantu lebih lanjut melalui Live Chat atau fitur Open Tiket ya!