# Brauzer sahifani qanday ochadi

> Brauzer HTML sahifani qanday o'qib ekranga chizadi? Kodni tahlil qilish, DOM daraxti qurish, CSS va JavaScript'ni qo'llash bosqichlari sodda tilda.

Manba: https://learncode.uz/web-dasturlash/brauzer-sahifa/
Sana: 2026-05-07

![Brauzer HTML, CSS va JavaScript kodidan tayyor web sahifa hosil qilishini ko'rsatuvchi rasm](https://learncode.uz/images/web-dasturlash/brauzer-sahifa-hero.webp)

*Brauzer HTML, CSS va JavaScript'ni qayta ishlab, tayyor sahifani ekranga chizadi.*

Server sahifa kodini qaytardi — endi [brauzer](https://learncode.uz/web-dasturlash/frontend-backend)
uni ekranga chizishi kerak. Bu jarayon oddiy ko'rinsa-da, ortida bir necha
bosqich bor. Bu darsda brauzer sahifani qanday ochishini ko'ramiz.

## Bosqichlar

Brauzer sahifani bir martalik, qat'iy navbat bilan emas, bir-biriga bog'langan
jarayonlar orqali chizadi. HTML tarmoqdan kelayotgan paytdayoq uning bir qismi
tahlil qilinishi mumkin. Soddalashtirilgan asosiy oqim quyidagicha:

1. **HTML'ni o'qiydi** va uni tahlil qiladi (parsing).
2. **DOM daraxtini** quradi — sahifa tuzilishining ichki modeli.
3. CSS qoidalaridan **CSSOM** modelini quradi.
4. DOM va CSSOM asosida ekranda ko'rinadigan elementlar uchun **render tree**
   tayyorlaydi.
5. Elementlarning o'lchami va joylashuvini hisoblaydi — bu **layout**.
6. Rang, chegara, matn va rasmlarni qatlamlarga chizadi — **paint**.
7. Qatlamlarni birlashtirib yakuniy tasvirni ko'rsatadi — **composite**.

JavaScript shu jarayonning turli nuqtalarida ishlashi mumkin. Oddiy `script`
HTML tahlilini vaqtincha to'xtatishi, `defer` bilan yuklangan skript esa HTML
tahlili tugagach bajarilishi mumkin. Shuning uchun real oqimni shunchaki
"avval HTML, keyin CSS, oxirida JavaScript" deb tushunish yetarli emas.

![Brauzerning HTML va CSSdan DOM, CSSOM hamda render tree qurib, layout, paint va composite bosqichlarida sahifani chizishi](https://learncode.uz/images/web-dasturlash/brauzer-bosqichlari.webp)

*Brauzer DOM va CSSOMni birlashtiradi, elementlar joylashuvini hisoblaydi va ularni qatlamlar orqali ekranga chizadi.*

## DOM — sahifaning ichki modeli

Brauzer [HTML](https://learncode.uz/html-css/html-nima) teglarini o'qib, ulardan **DOM** deb
ataladigan daraxt quradi. Elementlar, matn va ayrim boshqa qismlar daraxtdagi
tugunlarga aylanadi. Masalan `<body>` ichida `<h1>` va `<p>` bo'lsa, ular
`body` elementining farzand tugunlaridir.

DOM HTML faylining aynan o'zi emas. U brauzer xotirasida yaratilgan jonli
modeldir. JavaScript element qo'shsa yoki matnni almashtirsa, DOM o'zgaradi;
brauzer zarur bo'lgan joyni qayta hisoblab, qayta chizishi mumkin.

![HTML, head, body, h1 va p elementlaridan tuzilgan DOM daraxti hamda JavaScriptning uni o'zgartirishi](https://learncode.uz/images/web-dasturlash/dom-daraxti.webp)

*DOM HTML elementlarini daraxt ko'rinishida bog'laydi, JavaScript esa shu daraxt orqali sahifani o'zgartiradi.*

> **Atama**
>
> **DOM** (Document Object Model) — brauzer HTML'dan quradigan, sahifaning
> daraxtsimon ichki modeli. JavaScript aynan shu DOM orqali sahifani
> o'zgartiradi: matn qo'shadi, elementni yashiradi, rangini almashtiradi.

## CSSOM, render tree va chizish

Brauzer CSS qoidalarini **CSSOM** (CSS Object Model) ko'rinishida tartiblaydi.
DOM sahifada nima borligini, CSSOM esa u qanday ko'rinishini bildiradi. Ular
asosida render tree yaratiladi. Masalan, `display: none` qilingan element DOMda
bor, lekin ekranga chiziladigan render tree ichida bo'lmasligi mumkin.

Keyin brauzer har elementning kengligi, balandligi va koordinatasini
hisoblaydi. Bu layout bosqichi. Paint bosqichida matn, fon va chegaralar
chiziladi; composite esa alohida qatlamlarni yakuniy tasvirga birlashtiradi.

JavaScript DOM yoki stilni o'zgartirganda bu ishlarning bir qismi qayta
bajariladi. Juda ko'p o'lcham o'zgarishi layoutni, juda ko'p murakkab vizual
o'zgarish esa paint ishini ko'paytirib, sahifani sekinlashtirishi mumkin.

> **Yodda tuting**
>
> Brauzer HTML kelayotgan paytdayoq DOM qurishni boshlaydi. Tashqi CSS va
> JavaScriptning qayerda hamda qanday ulanganiga qarab, ayrim ishlar kutishi
> mumkin. Shu sababli skriptlarni `defer` bilan ulash, keraksiz katta CSSni
> kamaytirish va rasmlarga o'lcham berish sahifa ochilishiga yordam beradi.

> **DevTools bilan kuzating**
>
> Brauzer DevTools'ida Elements bo'limini oching va biror sarlavha matnini
> vaqtincha o'zgartiring. Siz asl HTML faylni emas, brauzer xotirasidagi DOMni
> o'zgartirasiz. Sahifani yangilasangiz, serverdan kelgan asl HTML yana
> yuklanadi va vaqtinchalik o'zgarish yo'qoladi.

## Qisqacha xulosa

- HTMLdan DOM, CSSdan CSSOM yaratiladi; ular render tree uchun asos bo'ladi.
- **DOM** — HTML'dan qurilgan daraxtsimon ichki model.
- Layout elementlar o'lchami va joyini, paint ularning ko'rinishini hisoblaydi.
- JavaScript sahifani DOM orqali o'zgartiradi.
- Yuklanish va bajarilish jarayonlari bir-biriga qo'shilib ketishi mumkin;
  skript atributlari va fayl hajmi bunga ta'sir qiladi.

Keyingi darsda [HTTP va so'rov-javob](https://learncode.uz/web-dasturlash/http-sorov-javob) —
brauzer va server qanday "gaplashishini" ko'ramiz.