Brauzer HTML'ni qanday tahlil qiladi: tokenizer, DOM va xatolarni "tuzatish"

Qisqacha: Brauzer HTML'ni ikki bosqichda o'qiydi: avval matnni "so'zlarga" — teglar va matn bo'laklariga — ajratadi (tokenizer), keyin ulardan DOM daraxtini quradi. Ikkinchi bosqichda u xatolarni standartda yozilgan aniq qoidalar bo'yicha jimgina "tuzatadi": yetishmagan tbody ni qo'shadi, yopilmagan p ni yopadi, jadval ichidagi adashgan matnni undan tashqariga chiqaradi. Shuning uchun Elements panelidagi DOM ko'pincha View Source'dagi koddan farq qiladi.

Bu darsda

• Tokenizer va daraxt qurish bosqichlarini tushuntira olasiz.
• Nega hamma brauzer xatoli HTML'ni bir xil "tuzatishini" bilasiz.
• Parser'ning eng muhim "tuzatish"larini taniysiz: tbody, yopilmagan teglar, noto'g'ri ichma-ichlik.
• table > tr kabi CSS selektor nega ishlamasligini tushunasiz.
• View Source va Elements'dan qachon qaysi birini ishlatishni bilasiz.

Oldin bilishingiz kerak: Kontent modeli, HTML'dan pikselgacha: Critical Rendering Path.

1. Nega bu kerak?

Birinchi sahifa darsida birinchi "sehr"ni ko'rgan edik: faylda html, head, body yo'q edi, Elements panelida esa ular paydo bo'ldi. Kontent modeli darsida esa brauzer noto'g'ri ichma-ichlikni o'zicha qayta qurishini ko'rdik.

Bu "sehr" emas — bu HTML parser (tahlilchi) ishi. Uni ichidan tushunsangiz:

• "Nega mening CSS'im ishlamayapti?" degan savolga ko'pincha javob topasiz.
• JavaScript'da elementni nega topa olmayotganingizni bilasiz.
• View Source va Elements farqidan qo'rqmaysiz.

HTML'dan pikselgacha darsida rendering yo'lining birinchi qadami — "parsing, DOM qurish" edi. Bugun o'sha qadamning ichiga kiramiz.

2. Ikki bosqich

2.1 Tokenizer — matnni "so'zlarga" ajratish

Brauzer serverdan oddiy matn oladi: belgilar ketma-ketligi. Birinchi bosqich — tokenizer — bu belgilarni ma'noli bo'laklarga, tokenlarga ajratadi.

Masalan, <p class="narx">Osh</p> dan shunday tokenlar chiqadi:

Boshqa token turlari: izoh, DOCTYPE va "fayl tugadi" belgisi. Gapni o'qiyotganda avval so'zlarni ajratib olasiz — tokenizer aynan shunday qiladi.

2.2 Daraxt qurish — tokenlardan DOM

Ikkinchi bosqich tokenlarni birma-bir oladi va DOM daraxtini quradi. Ochuvchi teg — yangi element yaratiladi va "ochiq elementlar" ro'yxatiga qo'shiladi. Matn — joriy elementga bola sifatida qo'shiladi. Yopuvchi teg — element yopiladi.

Qurish jarayoni har doim bitta rejimda bo'ladi: "head ichida", "body ichida", "jadval ichida" kabi. Bir xil token turli rejimda turlicha ishlanadi. Masalan, matn body ichida — oddiy matn, jadval ichida esa — "adashgan" matn (4.3-bo'lim).

2.3 Oqim bilan ishlash

Parser butun fayl yuklanishini kutmaydi. U kelayotgan baytlarni birin-ketin tahlil qiladi — sekin internetda sahifaning boshi oxiridan oldin ko'rinishi shu sababli. Renderni nima to'xtatadi darsida ko'rgandek, oddiy script tegi uchrasa, parser to'xtab, skript yuklanishi va bajarilishini kutadi.

3. Nega hamma brauzer bir xil "tuzatadi"

2000-yillarda har bir brauzer xatoli HTML'ni o'zicha tuzatardi. Bir xil sahifa Internet Explorer va Firefox'da turli DOM'ga aylanardi — dasturchilar uchun dahshat edi.

HTML5 standarti buni hal qildi: u faqat to'g'ri HTML'ni emas, xatoli HTML'ni qanday ishlashni ham aniq yozib berdi — har bir holat uchun, qadamma-qadam. Bugun barcha zamonaviy brauzerlar aynan shu algoritmga amal qiladi. Xatoli sahifa hamma joyda bir xil DOM beradi.

Bu yaxshi xabar — lekin xatoni xato qilib qoldirmang. "Bir xil tuzatiladi" — "to'g'ri tuzatiladi" degani emas. Natija ko'pincha siz rejalashtirgandan boshqacha.

4. Parser'ning muhim "tuzatish"lari

4.1 Yetishmagan elementlarni qo'shish

html, head, body ni yozmasangiz — parser yaratadi. Buni birinchi darslarda ko'rdik.

Kamroq ma'lum holat — jadvalda tbody:

<table>
  <tr><td>Osh</td><td>35 000</td></tr>
</table>

Brauzer qurgan DOM:

<table>
  <tbody>
    <tr><td>Osh</td><td>35 000</td></tr>
  </tbody>
</table>

tr jadvalning bevosita bolasi bo'la olmaydi — u qator guruhi ichida turishi kerak. Parser tbody ni o'zi qo'shdi. Jadvallarni Jadval asoslari darsidan o'rganamiz — shu detalni eslab qoling: u CSS'da kutilmagan natija beradi (7.1-bo'lim).

4.2 Yopilmagan teglarni yopish

Ba'zi elementlarning yopuvchi tegi ixtiyoriy — parser uni kerakli joyda o'zi "qo'yadi":

Yangi p kelganda eskisi yopiladi. Yangi li kelganda oldingisi yopiladi. Sarlavha ichida sarlavha bo'la olmaydi — tashqisi yopiladi.

Standart p va li ning yopuvchi tegini tushirib qoldirishga rasman ruxsat beradi. Lekin biz doim yozamiz: kod aniqroq, xatolar kamroq.

4.3 Jadvaldagi adashgan matn

<table>
  Menyu
  <tr><td>Osh</td></tr>
</table>

"Menyu" so'zi jadval ichida, lekin hech bir katakda emas. Parser uni jadvaldan oldinga chiqarib qo'yadi:

Menyu
<table>
  <tbody><tr><td>Osh</td></tr></tbody>
</table>

Bu hodisa standartda "foster parenting" ("asrab olish") deyiladi: adashgan kontent jadvaldan tashqaridagi "asrovchi ota"ga beriladi. Ekranda "Menyu" jadval ustida paydo bo'ladi — va siz uni kodda jadval ichida qidirasiz.

4.4 Noto'g'ri ichma-ich formatlash

<p><b>Osh <i>juda</b> mazali</i></p>

b i dan oldin yopilgan — qutichalar kesishib ketgan. Parser shunday qayta quradi:

<p><b>Osh <i>juda</i></b><i> mazali</i></p>

i ikkiga bo'lindi: biri b ichida, ikkinchisi undan keyin. Ekranda natija to'g'ri ko'rinadi ("juda" qalin kursiv, "mazali" — kursiv), lekin DOM'da endi ikkita i bor. CSS yoki JavaScript bitta element kutsa — adashadi.

4.5 Yetim yopuvchi teglar

</div>
<p>Salom</p>
</span>

Ochilmagan elementning yopuvchi tegi — parser uni shunchaki tashlab yuboradi. DOM'da faqat p qoladi.

4.6 Quirks mode'ning ta'siri

Hujjat skeleti darsida quirks mode haqida gaplashgan edik. U parser'ga ham ta'sir qiladi. Masalan:

<p><table><tr><td>A</td></tr></table>

• Standart rejimda (DOCTYPE bor): table paragrafni yopadi → <p></p><table>...</table>.
• Quirks mode'da (DOCTYPE yo'q): jadval paragraf ichida qoladi.

Bitta kod — ikki xil DOM, faqat birinchi qatorga qarab. <!DOCTYPE html> ni unutmaslikning yana bir sababi.

Tekshirib ko'ring: <ul><li>Choy<li>Kompot</ul> — DOM'da nechta li bo'ladi va ular qanday yopiladi?

5. View Source va Elements

Endi Birinchi sahifa darsidagi jadvalni to'liq tushunamiz:

Qachon qaysi biri:

• CSS ishlamayapti yoki JavaScript elementni topmayapti → Elements. Selektorlar DOM bilan ishlaydi, fayl bilan emas.
• Server nima yubordi? → View Source. Masalan, Google sahifangizda nimani ko'rishini tekshirish uchun.
• Ikkalasi farq qilyaptimi? → Farq joyida ko'pincha parser "tuzatgan" xato bor. Uni validator bilan toping.

Bo'sh joyni to'ldiring: jadvaldagi tr ni parser avtomatik ravishda qaysi element ichiga o'raydi?

6. Validatorga tayaning, brauzerga emas

Brauzer hech qachon "sizda xato bor" demaydi. U jim tuzatadi va sahifa "ishlaydi". Shuning uchun:

1. Brauzerda ko'rinishi — to'g'rilik belgisi emas.
2. HTML to'g'riligini validator va linter tekshiradi. Bu darsdagi har bir "tuzatish" validatorda xato yoki ogohlantirish sifatida chiqadi.
3. To'g'ri HTML'da View Source va Elements deyarli bir xil — faqat tbody kabi kichik farqlar bilan.

7. Ko'p uchraydigan xatolar

7.1 table > tr selektori ishlamaydi

CSS'da (keyinroq o'rganasiz) "jadvalning bevosita bolasi bo'lgan qator" deb yozsangiz, u hech narsani topmaydi — chunki DOM'da tr ning otasi table emas, tbody. JavaScript'da ham xuddi shunday. Tuzatish: jadvalda tbody ni o'zingiz yozing — kod va DOM bir xil bo'ladi.

7.2 "Yo'qolgan" matn

Jadval yoki ro'yxat ichiga yozilgan matn kutilmagan joyda paydo bo'ladi. Tuzatish: jadvalda matn faqat kataklar (td, th) yoki jadval nomida bo'ladi; ro'yxatda — faqat li ichida.

7.3 Ikki nusxa bo'lib qolgan element

Noto'g'ri ichma-ich formatlash tufayli DOM'da bitta element o'rniga ikkita paydo bo'ladi. CSS'da hover effekti "yarmi"ga ishlaydi, JavaScript faqat birinchisini topadi. Tuzatish: teglarni to'g'ri tartibda yoping — oxirgi ochilgan birinchi yopiladi.

8. Mashqlar

1-mashq (oson): DOM'ni ayting

1. <p>Osh<p>Kabob — DOM'da nechta p?
2. <table><tr><td>A</td></tr></table> — parser qo'shgan element:

2-mashq (o'rta): Oldindan ayting va tekshiring

Har bir parcha uchun brauzer qanday DOM qurishini yozing. Keyin alohida fayllarda ochib, Elements panelida tekshiring.

<table>
  Bugungi narxlar
  <tr><td>Osh</td><td>35 000</td></tr>
</table>
<p><strong>Diqqat: <em>juma</strong> yopiqmiz</em></p>

Bugungi narxlar
<table>
  <tbody><tr><td>Osh</td><td>35 000</td></tr></tbody>
</table>
<p><strong>Diqqat: <em>juma</em></strong><em> yopiqmiz</em></p>

3-mashq (qiyin): Farqni ovlang

1. Choyxona saytining istalgan sahifasini oching. View Source va Elements'ni yonma-yon qo'ying.
2. Ular orasidagi har bir farqni toping (DOCTYPE, tbody, bo'sh elementlar, bo'lingan teglar).
3. Har bir farqning sababini bu darsdagi bo'limlardan biriga bog'lang.
4. Farq xato tufayli bo'lsa — tuzating va qayta solishtiring.

9. Real ishda

• Frontend debugging — "CSS ishlamayapti" muammolarining bir qismi aynan parser "tuzatishlari": tbody, bo'lingan elementlar, jadvaldan chiqib ketgan matn.
• Hydration xatolari (React, Next.js — kursda o'rganamiz) — server HTML'ini parser "tuzatgani" uchun kelib chiqadi (o'tgan darsda ko'rdik).
• Xavfsizlik. Parser qoidalarini hujumchilar ham o'rganadi: g'alati, xatoli HTML bilan himoya filtrlarini "aldash" usullari mavjud. Shuning uchun foydalanuvchi HTML'ini tozalash uchun o'z-o'zidan yozilgan kod emas, sinovdan o'tgan kutubxonalar ishlatiladi — HTML darajasidagi xavfsizlik darsida.
• Vositalar. Node.js'da HTML'ni brauzer kabi tahlil qiluvchi kutubxonalar bor (masalan, parse5) — ular aynan shu standart algoritmni amalga oshiradi. Scraping, testlash va HTML'ni o'zgartirish vositalari ularga tayanadi.

Xulosa

• Parser ikki bosqichli: tokenizer (matn → tokenlar) va daraxt qurish (tokenlar → DOM).
• Xatoli HTML'ni qanday ishlash standartda yozilgan — hamma brauzer bir xil "tuzatadi", lekin natija siz kutgandek bo'lmasligi mumkin.
• Muhim "tuzatishlar": avtomatik html/head/body va tbody, p/li ni yopish, jadvaldagi matnni tashqariga chiqarish, noto'g'ri formatlashni bo'lish, yetim teglarni tashlash.
• DOCTYPE yo'qligi (quirks mode) parser natijasini ham o'zgartiradi.
• View Source — server yuborgan matn, Elements — parser va JS natijasi; CSS va JS Elements'dagi DOM bilan ishlaydi.
• To'g'rilikni brauzer emas, validator tekshiradi.

Keyingi dars: Amaliyot: semantik sahifa skeletini noldan qurish — o'rgangan hamma narsani bitta blog va bitta landing sahifada qo'llaymiz.

Manbalar

• WHATWG HTML: "Parsing HTML documents" (tokenization, tree construction) — html.spec.whatwg.org
• MDN: "How browsers work" va "Populating the page: how browsers work" — developer.mozilla.org