Brauzer asoslari
Server brauzeringizga HTML fayl yuborganda, o'sha fayl shunchaki matn. Brauzerning vazifasi o'sha matnni siz ko'radigan interaktiv sahifaga aylantirishdir. Mana u buni qanday qilishining umumiy sharhi.
HTML DOM ga aylanadi
Brauzer HTML ingizni yuqoridan pastga o'qiydi — bu parsing (tahlil qilish) deb ataladi. O'qish davomida u xotirada DOM (Document Object Model) deb ataladigan obyektlar daraxtini quradi.
DOM — bu sahifangizning jonli, tuzilgan tasviridir, brauzer va JavaScript u bilan ishlashi mumkin. Har bir teg daraxtdagi tugunga (node) aylanadi, HTML dagi ichma-ichlik esa DOM da ota-bola munosabatlariga aylanadi.
<body>
<h1>Title</h1>
<p>Some text</p>
</body>Buning DOM versiyasi — ikkita bolasi bo'lgan body tuguni: h1 tuguni va p tuguni. JavaScript sahifani o'zgartirganda — masalan, elementni yashirganda yoki matn qo'shganda — u aslida DOM ni o'zgartiradi va brauzer moslashish uchun qayta chizadi.
CSS uslublarga aylanadi
Ayni paytda brauzer CSS ingizni o'qiydi va uslub qoidalarining mos tuzilishini quradi (ba'zan CSSOM deb ataladi). So'ng u DOM dagi har bir element uchun qaysi uslublar amal qilishini aniqlaydi — rang, o'lcham, oraliq, joylashuv. Bu bosqich uslub hisoblash (style calculation) deb ataladi.
Shunday qilib siz birga ishlaydigan ikkita narsaga ega bo'lasiz: DOM sahifada nima borligini aytadi, hisoblangan uslublar esa har bir qism qanday ko'rinishini aytadi.
Sahifa qanday qilib ekranga chiqadi
Brauzer DOM va uslublarga ega bo'lgach, aslida piksellarni bo'yash uchun yana bir necha bosqichdan o'tadi:
- Layout — brauzer har bir elementning aniq o'lchami va joylashuvini hisoblaydi. Bu quti qayerga boradi? U qanchalik keng? Bu shuningdek reflow deb ham ataladi.
- Paint — brauzer piksellarni to'ldiradi: ranglar, matn, chegaralar, rasmlar.
- Composite — u barcha bo'yalgan qatlamlarni siz ko'radigan yakuniy tasvirga birlashtiradi.
Agar JavaScript keyinroq DOM yoki uslublarni o'zgartirsa, brauzer ta'sirlangan qismlar uchun layout va paintni takrorlashi mumkin. Shuning uchun ko'p DOM o'zgartirishlarini qilish sekin his qilinishi mumkin — har biri qo'shimcha ish talab qilishi mumkin.
Har bir tafsilotni yodlashingiz shart emas. Yodda saqlash kerak bo'lgan aqliy model: HTML → DOM, CSS → uslublar, so'ng layout → paint → siz ko'radigan narsa. Frontend dasturchi sifatida qiladigan hamma narsangiz oxir-oqibat o'sha oqimni shakllantirishga qaratilgan.
Suhbat maslahatlari
- DOM ni bir jumlada ta'riflang: JavaScript o'qiy va o'zgartira oladigan, sahifani ifodalovchi obyektlar daraxti.
- HTML DOM ni qurishini va har bir element qanday ko'rinishini hisoblash uchun CSS ustiga qo'llanishini tushuntiring.
- Taxminiy tartibni biling — parse, style, layout, paint — uni umumiy darajada saqlasangiz ham.
Muhokama
Hozircha izoh yo‘q
Muhokamada qatnashish uchun tizimga kiring.
KirishHozircha fikr yo‘q
Birinchi bo‘lib yozing: bu mavzuda nima yordam berdi — yoki nimani aniqroq tushuntirish kerak.