Digital Transformation
DOM (Document Object Model)
TL;DR: DOM (Document Object Model) adalah cara browser menyusun halaman web menjadi struktur pohon objek yang bisa dibaca dan diubah lewat JavaScript. Setiap elemen HTML jadi satu node di pohon ini, dan makin besar serta dalam pohonnya, makin lambat halaman dirender.
Apa itu DOM?
DOM adalah jembatan antara file HTML yang Anda tulis dan halaman yang akhirnya tampil di layar. Saat browser membaca HTML, ia tidak langsung menampilkannya, melainkan menerjemahkannya menjadi struktur pohon objek di memori. Setiap tag seperti heading, paragraf, dan gambar menjadi satu node, dan node bisa punya anak (node di dalamnya). Anggap saja seperti daftar isi bertingkat: bab berisi subbab, subbab berisi paragraf.
Yang membuat DOM penting adalah sifatnya yang hidup. JavaScript bisa menambah, menghapus, atau mengubah node kapan saja, dan browser langsung memperbarui tampilan. Inilah dasar dari semua interaktivitas web modern, termasuk framework seperti yang dipakai di proses hydration pada aplikasi React.
Cara Kerja: dari HTML ke Tampilan
| Tahap | Yang terjadi |
|---|---|
| Parsing | Browser membaca HTML dan membangun pohon DOM |
| Styling | CSS digabung menjadi aturan tampilan tiap node |
| Layout | Browser menghitung posisi dan ukuran tiap node |
| Paint | Piksel digambar ke layar |
Proses ini bagian dari critical rendering path. Makin banyak node DOM, makin berat tiap tahap, terutama saat ada perubahan yang memicu perhitungan ulang layout.
Kenapa Penting untuk Bisnis?
DOM yang terlalu besar adalah penyebab umum halaman terasa lambat, dan kecepatan berdampak langsung pada konversi serta peringkat. Google sendiri menyarankan menjaga jumlah node DOM di bawah sekitar 1.500 dan kedalaman tidak lebih dari 32 level, sesuai panduan di Lighthouse. Dalam beberapa proyek pengembangan website klien, memangkas DOM yang membengkak (sering dari builder visual yang menumpuk div) terbukti menurunkan waktu render secara terukur tanpa mengubah desain.
Pertanyaan Umum
Apakah DOM sama dengan HTML?
Tidak. HTML adalah teks sumber yang Anda tulis. DOM adalah hasil interpretasi browser atas HTML tersebut dalam bentuk objek yang bisa diubah secara dinamis oleh JavaScript.
Bagaimana cara tahu DOM saya terlalu besar?
Jalankan PageSpeed Insights atau Lighthouse. Keduanya memberi peringatan "Avoid an excessive DOM size" beserta jumlah node aktual halaman Anda.