Kirish

Virtual DOM nima va bizga qanday imkoniyatlarni taqdim etadi? Bu savol interviyularda asosiy va doimiy beriladigan savollardan biri hisoblanib, yangilar uchun ba’zida biroz chalg’ituvchi hamda birmuncha murakkab ham bo’lib ko’rinadi. Ushbu blogda bu tushunchani biroz sodda usul va bazi amaliy namunalar yordamida yoritishga harakat qilaman.

Qani kettik🚀

Dastlab, haqiqiy DOM o’zi nima? Keling, shu savolga javob topaylik:

DOM nima?

DOM (Document Object Model)

Document — bu HTML hujjatimiz, Object Model — Obyekt ko’rinishidagi struktura, buni “daraxt” misolida tasavvur etishimiz mumkin.

DOM — bu HTML hujjatimizda mavjud bo’lgan barcha elementlarning “daraxt” ko’rinishida tartiblangan strukturasi.

Keling ushbu rasmga nazar solaylik.

Veb sahifamiz brauzerga yuklanganda, brauzer yuqorida ko’rsatilgani kabi HTML elementlarimizdan tashkil topgan DOM’ni yaratadi. Biz mana shu DOM elementlari ustida turli xil amallar (elementlarni o’chirish, yangi element qo’shish, o’zgatirish va hokazo) ni amalga oshirishimiz mumkin bo’ladi. DOM ning biror elementi ustida bajarilgan amal, ushbu elementga telegishli barcha ichki elementlarning qaytadan yangilanishiga sabab bo’ladi va bu veb sahifamizning sekinlashishiga sabab bo’ladi. Mana shu holatda Virtual DOM asqotadi.

VIRTUAL DOM nima?

Vue.JS misolida ko’rib chiqmiz.

Virtual DOM — haqiqiy DOM ning virtual ko’rinishi ya’ni Vue.js yordamida hosil qilinadigan DOM namunasi bo’lib, veb sahifamizning tezligi va samaradorligini oshirishga yordam beradi.

Veb sahifamiz bruzerga yuklanganda Vue.Js avtomatik tarzda haqiqiy DOM’dan namuna olib Virtual DOM ni yaratadi va sahifamizdagi o’zgarishlarni Virtual DOM yordamida taqqoslab natijani haqiqiy DOM ga uzatadi. Keling mana shu jarayonni bosqichlarga bo’lib ko’rib chiqmiz:

1. State (o’zgaruvchi) o’zgartirildi.
Dasturimizda biror tugma (button) bosilish natijasida, bir o’zgaruvchi o’zgartirildi

2. Reactivity (reaktivlik) xususiyati
Vue.Js reaktivlik xususiyati orqali o’zgarish bo’lganini sezadi

3. Virtual DOM diffing and Updating (taqqoslash va yangilash jarayoni)
Vue.Js o’zgarish natijasida yangi Virtual DOM ni yaratadi va uni eskisi bilan taqqoslaydi, so’ng o’zgarish bo’lgan qismni o’zinigina yangilab qo’yadi

4. Haqiqiy DOM ga o’zgarishlarni uzatish
Virtual DOMdagi so’ngi natijaviy o’zgarishlar haqiqiy DOMga uzatiladi va tegishli qismlar o’zgartiriladi, bu bosqich odatda “patching” yoki “reconcilation” deb ham ataladi.

Haqiqiy DOM amaliy namuna:

Ko’rib turganimizdek DOM da bir marta o’zgarish bo’lgandan keyin ham ‘button’ bosilganda DOM qayta-qayta yangilanyapti va bu DOM uchun samarasiz hisoblanadi

Virtual DOM yordamida:

Virtual DOM haqiqiy DOM ni faqat birinchi marta ‘button’ bosilganda o’zgartiryapti, keyingi bir xil o’zgarishlarda qayta-qayta yangilamayapti mana bu ham Virtual DOMning samaradorligiga yana bir misol.

“key” nega kerak?

Bilamizki Vue.Js yoki React.Js da ro’yhat yoki shu kabi o’xshash elementlarni o’z ichiga olgan kontent tuzganimizda, ularning ‘key’ atributiga takrorlanmas qiymatlarni biriktirib ketamiz.

Aslida bu nega kerak?

Virtual DOM elementlarni Object Model ko’rinishida o’sha ‘key’lar bilan birga saqlaydi va o’zgarishlarni mana shu ‘key’ lar orqali ajratib oladi. Tasavvur qilamiz, Veb sahifada ketma-ket ro’yhat elementlari keltirilgan bo’lsin, ixtiyoriy element o’zgartirilganda Virtual DOM aynan qaysi element o’zgartirilganini o’sha “key” orqali aniqlaydi va tegishli qismni o’zgartiradi. Keling buni misollarda ko’ramiz.

“key” attribut berilmagan holatda:

Bu holatda Virtual DOM qaysi “input” qiymati o’zgarganligini aniqlay olmadi, chunki “key” atributi berilmagan.

“key” attribut berilgan holatda:

Mana endi hammasi to’g’ri ishlayapti. Bu holatda Virtual DOM key bilan birga saqlagan elementlarni o’sha “key”i orqali aniqlayapti, tartibini o’zgartiryapti!

Xulosa

Bugungi blogda Virtual DOM haqida umumiy ma’lumotlar, uning afzalliklari hamda haqiqiy DOM dan farqlarini ko’rib chiqdik. Qisqacha aytgancha Virtual DOM — bu haqiqiy DOM ning virtual nusxasi bo’lib, Vue.Js’ga sahifada biror o’zgarish sodir bo’lganda DOM ni dasturimizning tezligiga ortiqcha ta’sir qilmasdan eng samarali usul bilan o’zgartirishiga yordam beradi va bu veb saytlarni samaradorligi uchun eng muhim tamoillaridan biri hisoblanadi. Virtual DOM o’zgarishlarni samarali amalga oshirishda “key” atributidan foydalanadi, bir turdagi ro’yhat kabi elementlarni tegishli key qiymati bilan birga saqlaydi va o’zgarish sodir bo’lganda aynan o’sha “key” orqali elementni aniqlaydi va o’zgartiradi.

LinkedIn: Link

Telegram: Link