Brauzer sahifani qanday ochadi

Brauzer HTML, CSS va JavaScript kodidan tayyor web sahifa hosil qilishini ko'rsatuvchi rasm — Brauzer HTML, CSS va JavaScript’ni qayta ishlab, tayyor sahifani ekranga chizadi.

Server sahifa kodini qaytardi — endi brauzer 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:

HTML’ni o’qiydi va uni tahlil qiladi (parsing).
DOM daraxtini quradi — sahifa tuzilishining ichki modeli.
CSS qoidalaridan CSSOM modelini quradi.
DOM va CSSOM asosida ekranda ko’rinadigan elementlar uchun render tree tayyorlaydi.
Elementlarning o’lchami va joylashuvini hisoblaydi — bu layout.
Rang, chegara, matn va rasmlarni qatlamlarga chizadi — paint.
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 — Brauzer DOM va CSSOMni birlashtiradi, elementlar joylashuvini hisoblaydi va ularni qatlamlar orqali ekranga chizadi.

DOM — sahifaning ichki modeli

Brauzer HTML 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 — DOM HTML elementlarini daraxt ko’rinishida bog’laydi, JavaScript esa shu daraxt orqali sahifani o’zgartiradi.

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.

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 — brauzer va server qanday “gaplashishini” ko’ramiz.