54-dars

DOM tree vs Render tree

DOM tree — HTML'dan yaratilgan, hamma elementlarni o'z ichiga olgan daraxt (oldingi mavzuda ko'rganimiz). Render tree — shu DOM tree'dan olingan, lekin faqat ekranda ko'rinadigan narsalarni, ularning hisoblangan CSS stillari bilan birga saqlaydigan, alohida daraxt.

Ya'ni: DOM tree — "hujjatda nima bor" haqida. Render tree — "ekranda nima ko'rinishi kerak, qanday ko'rinishda" haqida.

<body>
  <h1>Sarlavha</h1>
  <p style="display: none">Ko'rinmaydigan matn</p>
  <p>Ko'rinadigan matn</p>
</body>

DOM tree — hammasini o'z ichiga oladi:

body
 ├── h1
 ├── p (display: none)
 └── p

Render tree — display: none bo'lgan elementni butunlay tashlab yuboradi, chunki u ekranga chiqmaydi, joy ham egallamaydi:

body
 ├── h1  [font-size: 32px, color: black, ...]
 └── p   [font-size: 16px, color: black, ...]

---

1. Nega ikkitasi kerak — bitta daraxt yetarli emasmi?

Bu ikkita butunlay boshqa maqsad uchun:

DOM tree — JavaScript bilan ishlash uchun: siz element.remove(), element.textContent = '...' deganda, DOM tree'ni o'zgartirasiz. DOM — mantiqiy, dasturiy tuzilma, CSS haqida umuman bilmaydi.

Render tree — brauzerning ekranga chizish uchun kerak bo'lgan tuzilma. Unda faqat ko'rinadigan elementlar bor, va har biriga hisoblangan (computed) stil biriktirilgan — masalan, <p> uchun aniq: font-size: 16px, color: rgb(0,0,0), margin: 8px va hokazo, hatto siz CSS'da hech narsa yozmagan bo'lsangiz ham (brauzer default stillari qo'llanadi).

Agar bitta daraxtda hammasini aralashtirsangiz — har safar biror element yashirin bo'lsa (display:none), yoki <head>, <script>, <meta> kabi umuman vizual bo'lmagan teglar bo'lsa, render mexanizmi ularni "chizmasdan o'tkazib yuborish" uchun har safar qo'shimcha tekshirish qilishi kerak bo'lardi. Alohida, tayyor render tree bo'lsa — chizish jarayoni to'g'ridan-to'g'ri, tez ishlaydi, chunki unda faqat kerakli narsalar bor.

---

2. Brauzer darajasida — bu qanday quriladi

Bu jarayon uchta aniq bosqichdan iborat, va Chrome'da Blink rendering engine tomonidan bajariladi (V8 emas — V8 faqat JS kodni bajaradi):

1-bosqich: DOM tree qurish Oldingi mavzuda ko'rganimizdek — HTML parsing orqali.

2-bosqich: CSSOM (CSS Object Model) qurish Xuddi HTML DOM'ga aylantirilgani kabi, CSS ham daraxtga aylantiriladi — bu CSSOM deyiladi:

body { font-size: 16px; }
p { color: blue; }
p.big { font-size: 24px; }

CSSOM — qoidalar orasidagi spetsifiklik (specificity) va meros (inheritance) munosabatlarini o'z ichiga olgan daraxt. Muhim jihat: CSSOM qurilishi CSS faylning to'liq yuklanishini kutadi — chunki keyingi qoida oldingisini bekor qilishi mumkin (masalan, pastroqdagi qoida yuqoridagisidan ustun bo'lishi mumkin), shuning uchun brauzer hamma CSS'ni o'qib bo'lmasdan turib CSSOM'ni yakunlay olmaydi. Shu sababli CSS — render-blocking resurs hisoblanadi.

3-bosqich: Render tree = DOM + CSSOM birlashtirilishi

Brauzer DOM tree bo'ylab yuradi, har bir node uchun:

1. Bu node ekranga chiqadimi? (display: none, <head>, <script> kabi teglar — yo'q, tashlab yuboriladi. visibility: hidden esa qoladi — chunki u joy egallaydi, faqat ko'rinmas, bu muhim farq!)
2. Agar chiqsa — CSSOM'dan shu elementga tegishli barcha qoidalar topiladi, spetsifiklik/meros hisobga olinib, yakuniy, hisoblangan stil (computed style) chiqariladi
3. Shu ikkovi — node + computed style — birlashtirilib, Render treening bitta tugunini (Blink'da bu LayoutObject deb ataladi) tashkil qiladi

 DOM tree                    CSSOM                    Render tree
    ┌─────────────┐          ┌──────────────────┐        ┌──────────────────────┐
    │   body      │          │ body {font:16px}  │        │  body [font:16px]    │
    │   ├─ h1     │    +     │ p {color: blue}   │   =    │   ├─ h1 [default...] │
    │   └─ p(none)│          │                   │        │   (p(none) — yo'q)   │
    └─────────────┘          └──────────────────┘        └──────────────────────┘

---

3. Muhim tafovut: display: none vs visibility: hidden

Bu ikkovi ko'pincha chalkashtiriladi, lekin Render tree darajasida ular butunlay boshqa xatti-harakat:

.a { display: none; }      /* Render tree'dan BUTUNLAY chiqarib tashlanadi */
.b { visibility: hidden; } /* Render tree'da QOLADI, faqat "ko'rinmas" belgisi bilan */

display: none — element joy ham egallamaydi, go'yo umuman yo'qdek. Render tree'da unga mos LayoutObject yaratilmaydi.

visibility: hidden — element joyini egallab turadi (bo'sh joy qoladi), faqat ko'zga ko'rinmaydi. Render tree'da to'liq mavjud, chizish (paint) bosqichigacha yetib boradi, faqat "buni chizma" degan bayroq bilan.

Bu farq — keyingi mavzu Reflow vs Repaintda juda muhim bo'ladi: display: noneni o'zgartirish — Reflow (butun joylashuvni qayta hisoblash) kerak bo'ladi, visibilityni o'zgartirish — faqat Repaint (qayta chizish, joylashuv o'zgarmaydi) bilan chegaralanadi.

---

4. Nega bu bilim amaliyotda kerak

// YOMON: har chaqiriqda Render tree bilan bog'liq qayta hisoblash keltirib chiqaradi
element.style.display = 'none';
element.style.color = 'red';    // bu keraksiz — element allaqachon render tree'da yo'q
element.style.display = 'block';

Agar siz bir nechta element uchun ko'p sonli style o'zgartirishlarni ketma-ket qilsangiz, brauzer har safar Render tree'ni qayta baholashi mumkin (bu — Reflow/Repaint mavzusida chuqurroq ko'radigan performance muammosi). Shuning uchun professional darajada CSS class'larni bir martada almashtirish (element.className = '...') yoki display: none qilib, keyin bir nechta o'zgarish qilib, oxirida qayta ko'rsatish — tezroq, chunki display: none paytida element Render tree'dan chiqarilgan bo'lib, ichidagi o'zgarishlar hisoblanmaydi, faqat oxirgi holat bir marta hisoblanadi.

---

Xulosa

DOM tree = "nima bor" (JS uchun), CSSOM = "qanday ko'rinishi kerak" (CSS'dan), Render tree = ikkovining birlashuvi — faqat ko'rinadigan narsalar + ularning hisoblangan stillari, ekranga chiqarish uchun tayyor holat.