jfid – Jika Anda pernah belajar tentang web development, mungkin Anda pernah mendengar istilah VDOM dan DHTML. Apa sebenarnya arti dari kedua istilah tersebut?
Bagaimana perbedaan dan hubungan antara keduanya? Artikel ini akan menjelaskan secara singkat dan jelas tentang VDOM dan DHTML.
VDOM: Virtual Document Object Model
VDOM adalah singkatan dari Virtual Document Object Model. VDOM adalah sebuah konsep yang digunakan oleh beberapa library atau framework JavaScript, seperti React, Vue, dan Angular, untuk meningkatkan performa dan efisiensi dalam memanipulasi elemen HTML di halaman web.
VDOM adalah sebuah representasi dari DOM (Document Object Model) yang ada di memori (memory).
DOM adalah sebuah struktur data yang merepresentasikan elemen HTML, atribut, dan konten yang ada di halaman web. DOM memungkinkan kita untuk mengakses dan mengubah elemen HTML dengan menggunakan JavaScript.
Namun, mengubah DOM secara langsung bisa menyebabkan masalah performa, karena setiap perubahan DOM akan memicu proses reflow dan repaint.
Reflow adalah proses menghitung ulang posisi dan ukuran elemen HTML, sedangkan repaint adalah proses menggambar ulang elemen HTML di layar.
Proses ini bisa memakan banyak sumber daya, terutama jika perubahan DOM terjadi secara sering dan besar.
Untuk mengatasi masalah ini, VDOM digunakan sebagai perantara antara DOM dan JavaScript. VDOM adalah sebuah objek JavaScript yang meniru struktur DOM, tetapi tidak terikat dengan elemen HTML di halaman web.
Dengan menggunakan VDOM, kita bisa melakukan perubahan DOM secara virtual, tanpa mempengaruhi DOM asli.
Setelah kita melakukan perubahan VDOM, kita bisa membandingkan VDOM baru dengan VDOM lama, dan menghitung perbedaan (difference) antara keduanya.
Kemudian, kita bisa menerapkan perbedaan tersebut ke DOM asli, sehingga hanya bagian yang berubah saja yang akan mengalami reflow dan repaint. Proses ini disebut sebagai diffing dan patching.
Dengan menggunakan VDOM, kita bisa mengurangi jumlah reflow dan repaint yang terjadi, sehingga performa halaman web bisa lebih baik dan responsif.
DHTML: Dynamic HTML
DHTML adalah singkatan dari Dynamic HTML. DHTML adalah sebuah istilah yang digunakan untuk menggambarkan teknik atau metode untuk membuat halaman web yang dinamis dan interaktif, dengan menggunakan kombinasi dari HTML, CSS, JavaScript, dan DOM.
DHTML bukanlah sebuah bahasa pemrograman, melainkan sebuah konsep atau paradigma yang memanfaatkan kemampuan dari HTML, CSS, JavaScript, dan DOM untuk membuat halaman web yang bisa berubah-ubah sesuai dengan interaksi pengguna, tanpa perlu memuat ulang halaman web.
Dengan menggunakan DHTML, kita bisa membuat halaman web yang memiliki fitur-fitur seperti animasi, validasi form, drag and drop, sorting, filtering, dan lain-lain.
DHTML juga memungkinkan kita untuk mengubah tampilan dan konten halaman web secara dinamis, dengan menggunakan JavaScript untuk mengakses dan mengubah elemen HTML melalui DOM.
DHTML adalah sebuah istilah yang sudah cukup lama digunakan, sejak era web 1.0.
Namun, dengan perkembangan teknologi web, istilah DHTML sudah jarang digunakan, karena sudah dianggap sebagai hal yang umum dan standar dalam web development.
Istilah-istilah seperti Ajax, SPA, dan PWA lebih sering digunakan untuk menggambarkan teknik atau metode yang lebih modern dan canggih dalam membuat halaman web yang dinamis dan interaktif.
Kesimpulan
VDOM dan DHTML adalah dua istilah yang berhubungan dengan web development. VDOM adalah sebuah konsep yang digunakan oleh beberapa library atau framework JavaScript untuk meningkatkan performa dan efisiensi dalam memanipulasi elemen HTML di halaman web.
DHTML adalah sebuah istilah yang digunakan untuk menggambarkan teknik atau metode untuk membuat halaman web yang dinamis dan interaktif, dengan menggunakan kombinasi dari HTML, CSS, JavaScript, dan DOM.
