Brauzer Qanday Ishlaydi? Koddan Vizual Ko'rinishgacha bo'lgan Yo'l
Brauzerlar kodni vizual ko'rinishga qanday aylantirishini o'rganing: parsing, DOM/CSSOM qurilishi, render tree, layout va painting jarayonlari.
2-dars
Brauzer Qanday Ishlaydi? Koddan Vizual Ko'rinishgacha bo'lgan Yo'l
Siz .html, .css va .js kengaytmali fayllarni yaratasiz, ularni brauzerda ochasiz va birdaniga ekranda tugmalar, rasmlar va animatsiyalarni ko'rasiz. Xo'sh, brauzer orqa fonda nimalar bilan band bo'ladi? Bu jarayon Critical Rendering Path (Muhim renderlash yo'li) deb ataladi.
1. Parsing: Kodni Daraxtga Aylantirish
Brauzer serverdan fayllarni olgach, birinchi navbatda ularni tahlil qiladi (Parsing).
DOM (Document Object Model): Brauzer HTML kodni o'qiydi va uni "Oila daraxti" ko'rinishiga keltiradi. Masalan, <body> tegining ichida <h1> va <p> borligini ierarxiya ko'rinishida saqlaydi.
CSSOM (CSS Object Model): Brauzer CSS fayllarni o'qib, qaysi elementga qanday stil (rang, o'lcham, joylashuv) berilganini daraxt ko'rinishida shakllantiradi.
2. Render Tree: Ikki Dunyo Birlashuvi
DOM (struktura) va CSSOM (stillar) tayyor bo'lgach, brauzer ularni birlashtirib Render Tree hosil qiladi.
Muhim jihat: Render Tree'ga faqat ekranda ko'rinadigan elementlar kiradi. Masalan, CSS'da display: none; berilgan elementlar bu daraxtga qo'shilmaydi.
3. Layout (Geometriya): Kim Qayerda Turadi?
Endi brauzer har bir elementning ekrandagi aniq o'lchamini va o'rnini (koordinatalarini) hisoblab chiqadi.
- "Bu blok ekran kengligining 50 foizini egallashi kerak."
- "Bu rasm tepadan 20 piksel pastda turishi kerak."
Bu jarayon ba'zan Reflow deb ham ataladi.
4. Painting (Chizish): Ranglar va Piksellar
Geometriya aniq bo'lgach, brauzer elementlarni ekranga "chiza" boshlaydi. Matnlarga rang beriladi, chegaralar (border) chiziladi, soyalar va rasmlar joylashtiriladi. Bu bosqichda hamma narsa piksellarga aylanadi.
5. JavaScript-ning Roli: "To'xtab turing!"
JavaScript brauzer uchun "injiq" mehmon hisoblanadi. Brauzer HTML'ni o'qiyotganda <script> tegini uchratib qolsa, u parsing jarayonini to'xtatadi, JS faylni yuklab oladi, bajaradi va shundan keyingina qolgan ishini davom ettiradi.
Shuning uchun ham ko'pincha JS fayllarni <body> tegining eng oxirida ulaymiz yoki async/defer atributlaridan foydalanamiz.
Texnik Atamalar Lug'ati
| Atama | Ta'rif |
|---|---|
| Rendering Engine | Brauzerning kodni tasvirga aylantiruvchi asosiy qismi (Masalan: Chrome'da Blink, Safari'da WebKit). |
| Parsing | Matnli kodni kompyuter tushunadigan ma'lumot tuzilmasiga o'tkazish. |
| Reflow | Sahifa o'lchami o'zgarganda elementlar joylashuvini qaytadan hisoblash. |
| Repaint | Elementning joylashuvi o'zgarmasdan, faqat ko'rinishi (masalan, rangi) o'zgarganda qayta chizilishi. |
Xulosa
Brauzerlar qanday ishlashini tushunish sizga samaraliroq kod yozish va veb-saytlar tezligini optimallashtirishda yordam beradi. Siz parsing, DOM/CSSOM qurilishi, render tree yaratilishi, layout hisoblanishi va painting jarayonlarini o'rgandingiz. Bu bilimlar sizga tezroq va javob beruvchan veb-ilovalar yaratishda yordam beradi.