Brauzer tuzilishi va dvigatellar: Blink, Gecko, WebKit va V8

Qisqacha: Brauzer — bir nechta qismdan yig'ilgan katta dastur. Asosiylari: siz ko'radigan interfeys, sahifani chizadigan rendering dvigateli, JavaScript kodini bajaradigan JS dvigateli va internetdan fayl olib keladigan tarmoq qismi. Chrome, Edge va Yandex Browser ichida bir xil dvigatellar ishlaydi (Blink va V8), Firefox'da — Gecko, Safari'da — WebKit. Zamonaviy brauzer har bir saytni alohida jarayonda ochadi: bitta tab qulasa, qolganlari ishlayveradi.

Bu darsda

• Brauzerning asosiy qismlarini va har biri qanday ish qilishini ayta olasiz.
• Rendering dvigateli bilan JavaScript dvigatelini farqlaysiz va qaysi brauzerda qaysi dvigatel borligini bilasiz.
• "Chromium asosidagi brauzer" nima ekanini tushuntira olasiz.
• Brauzer nega har saytni alohida jarayonda ochishini tushuntirasiz.
• Brauzerning o'z Task Manager'ida jarayonlarni ko'rib, bitta tabni "o'ldirib" ko'rasiz.

Oldin bilishingiz kerak: Operatsion tizim nima: kernel, jarayon va oqim, Manzilni yozganda nima bo'ladi: to'liq sayohat.

1. Nega bu kerak?

To'liq sayohat darsida manzil yozilgandan to server HTML faylni yuborguncha bo'lgan yo'lni ko'rdik. Fayl brauzerga yetib keldi. Endi savol: brauzer ichida u bilan nima bo'ladi?

Bir vaziyatni tasavvur qiling. Malika o'zining birinchi saytini Chrome'da ochdi — hammasi chiroyli. Dugonasi saytni iPhone'da ochdi — tugma siljib, matn ustiga chiqib qolgan. Kod bir xil, natija har xil. Nega?

Javob brauzerning ichida. Har bir brauzer sahifani o'zining "dvigateli" bilan chizadi. Dvigatellar bir xil qoidalarga amal qiladi, lekin ba'zi mayda joylarda farq qiladi.

Yana bir savol: bitta tabda sayt qotib qolsa, nega qolgan tablar ishlayveradi? Bu ham brauzer tuzilishi bilan bog'liq. Bu darsda shu ikki savolga javob topamiz.

2. Brauzer qanday qismlardan iborat?

2.1 Restoran o'xshatishi

Brauzerni restoran deb tasavvur qiling:

• Zal va menyu — mijoz ko'radigan joy.
• Ofitsiant — buyurtmani zaldan oshxonaga yetkazadi.
• Oshpaz — retsept bo'yicha taom tayyorlaydi.
• Ta'minotchi — bozordan masalliq olib keladi.
• Omborxona — masalliq va tayyor narsalar saqlanadigan joy.

Brauzerda ham xuddi shunday: har bir ishni alohida qism bajaradi.

2.2 Asosiy uchlik

Eng muhim uchta qismdan boshlaymiz.

Foydalanuvchi interfeysi (User Interface, UI) — brauzerning sahifadan tashqari hamma ko'rinadigan qismi. Manzil satri, orqaga/oldinga tugmalari, tablar, xatcho'plar, menyu. Restoranda — zal va menyu.

Rendering dvigateli (rendering engine) — HTML va CSS matnini o'qib, ekrandagi rasmga aylantiradigan qism. "Render" — chizish degani. Restoranda — oshpaz: retseptni (HTML va CSS) o'qib, tayyor taomni (ko'rinadigan sahifani) chiqaradi.

JavaScript dvigateli (JS engine) — sahifadagi JavaScript kodini bajaradigan qism. CPU darsida ko'rgandik: protsessor faqat mashina kodini tushunadi. JS dvigateli JavaScript'ni shu mashina kodiga o'girib, bajartiradi.

Maslahat: HTML — sahifaning skeleti (sarlavha, matn, rasm qayerda). CSS — uning kiyimi (rang, shrift, joylashuv). JavaScript — xatti-harakati (tugma bosilganda nima bo'ladi). Uchalasini ham 04–08-qismlarda o'rganamiz, hozir faqat shu uch jumlani eslab qoling.

2.3 Yordamchi qismlar

Uchlikka yana to'rtta yordamchi qism xizmat qiladi:

Tarmoq qismini siz yaxshi taniysiz: DNS, HTTP va TLS — aynan uning ishi. Ma'lumot omborini esa Brauzer xotirasi darsida batafsil ochamiz.

Qismlar qanday bog'langanini diagrammada ko'ring:

flowchart TD
  UI["Interfeys: manzil satri, tablar"] --> BE["Brauzer dvigateli"]
  BE --> RE["Rendering dvigateli: HTML, CSS"]
  RE --> JS["JavaScript dvigateli"]
  RE --> NET["Tarmoq: DNS, HTTP, TLS"]
  RE --> UIB["UI backend: OS orqali chizish"]
  BE --> DS["Ma'lumot ombori: cookie, kesh"]

Tekshirib ko'ring: Siz manzil satriga ilmhamroh.uz deb yozdingiz. Bu matnni qaysi qism qabul qiladi, sahifa faylini internetdan qaysi qism olib keladi?

3. Dvigatellar: kim nimani chizadi

3.1 Qaysi brauzerda qaysi dvigatel

Har bir brauzer ikki asosiy dvigatelga ega. Ularning nomlari:

Bu nomlarni yodlash shart emas. Muhimi — jadvaldagi uchta oila: Blink, Gecko va WebKit. Dunyodagi deyarli barcha brauzerlar shu uchtasidan birida ishlaydi.

Qiziq fakt: Blink 2013-yilda WebKit'dan ajralib chiqqan. Shuning uchun Chrome va Safari ba'zi joylarda o'xshash ishlaydi, lekin bugun ular alohida rivojlanadi.

3.2 Chromium nima?

Jadvalda ko'ryapsizmi, Chrome, Edge, Yandex Browser, Opera va Brave'da dvigatellar bir xil. Sababi — ularning hammasi Chromium asosida qurilgan.

Chromium — Google boshqaradigan ochiq kodli brauzer loyihasi. Ochiq kodli (open source) — dastur kodi hamma uchun ochiq: istalgan kishi uni o'qishi va o'z mahsulotiga asos qilib olishi mumkin.

O'xshatish: Chromium — avtomobil shassisi va motori. Chrome, Edge, Yandex Browser — shu motorga turli kuzov, rang va salon qo'ygan kompaniyalar. Tashqi ko'rinish har xil, ichidagi motor bir xil.

Shuning uchun saytingiz Chrome'da to'g'ri chiqsa, Edge va Yandex Browser'da ham deyarli har doim to'g'ri chiqadi. Firefox va Safari esa — boshqa motorlar. Ularni alohida tekshirish kerak.

3.3 iPhone istisnosi

iPhone va iPad'da Apple uzoq yillar faqat WebKit'ga ruxsat bergan. Shuning uchun iPhone'dagi Chrome ham ichida Blink emas, WebKit ishlatadi. Ustidagi yozuv "Chrome", motor esa Safari'niki.

2024-yildan Yevropa Ittifoqida bu qoida yumshatildi, boshqa mamlakatlarda esa amalda hali ham shunday. Xulosa: saytingiz iPhone'da qanday ko'rinishini bilish uchun Safari'da (WebKit'da) tekshirasiz.

3.4 V8 faqat brauzerda emas

V8 — shunchaki Chrome'ning bir qismi emas. U alohida ham ishlay oladi. Node.js — V8'ni brauzerdan olib, kompyuterda JavaScript ishlatish uchun qurilgan dastur. Uni Node.js nima darsida o'rnatamiz.

Demak, keyinroq server tomonida yozadigan JavaScript kodingiz ham aynan shu V8 dvigatelida bajariladi.

Tekshirib ko'ring: Jasur saytini Chrome va Edge'da tekshirdi, hammasi joyida. U "saytim hamma brauzerda ishlaydi" deya oladimi?

4. Ko'p jarayonli model

4.1 Eski usul: hammasi bitta jarayonda

Operatsion tizim darsida jarayonni o'rgandik: ishlayotgan dasturning alohida xotirali nusxasi. Jarayonlar bir-birining xotirasiga tega olmaydi.

2000-yillarning eski brauzerlarida barcha tablar bitta jarayonda ishlardi. Oqibati: bitta tabdagi sayt qotsa yoki xato qilsa, butun brauzer yopilib ketardi. Ochiq turgan o'nta tab, yozilgan xat — hammasi yo'qolardi.

O'xshatish: bitta oshxonada o'nta oshpaz ishlayapti. Bittasining qozoni yonib ketsa, butun oshxonani tutun bosadi. Hamma ish to'xtaydi.

4.2 Chrome yondashuvi: har sayt — alohida jarayon

Google Chrome 2008-yilda boshqacha yo'l tutdi: har sayt uchun alohida jarayon. Bugun barcha asosiy brauzerlar shunday ishlaydi. Chrome'dagi asosiy jarayonlar:

Browser jarayoni (bosh boshqaruvchi: oyna, tablar, manzil satri)
 ├── Renderer jarayoni: ilmhamroh.uz sahifasi
 ├── Renderer jarayoni: youtube.com sahifasi
 ├── GPU jarayoni (grafikani videokartaga uzatadi)
 ├── Network jarayoni (barcha tarmoq so'rovlari)
 └── Kengaytmalar jarayonlari

• Browser jarayoni — bosh boshqaruvchi. Interfeys va boshqa jarayonlarni boshqaradi.
• Renderer jarayoni — sahifani chizadigan jarayon. Rendering dvigateli va JS dvigateli aynan shu yerda ishlaydi.
• GPU jarayoni — videokarta (GPU) bilan ishlaydi: tayyor tasvirni ekranga chiqaradi.

Maslahat: Aniqrog'i, Chrome jarayonlarni tab bo'yicha emas, sayt bo'yicha ajratadi. Bir saytning ikki tabi bitta jarayonni bo'lishishi mumkin. Xotira juda kam bo'lsa, Chrome jarayonlarni birlashtirishi ham mumkin.

4.3 Bu nima beradi?

• Barqarorlik. Bitta sayt qulasa, faqat o'sha tab yopiladi. Chrome'da "Aw, Snap!" ("Voy!") sahifasi chiqadi. Qolgan tablar ishlayveradi.
• Xavfsizlik. Renderer jarayoni sandbox ichida ishlaydi. Sandbox (qum qutisi) — dasturning huquqlari qattiq cheklangan muhit. Bolalar maydonchasidagi qum qutisini eslang: ichida xohlagancha o'ynash mumkin, qum esa tashqariga chiqmaydi. Sandbox'dagi sayt kompyuteringizdagi fayllarni o'z-o'zidan o'qiy olmaydi.
• Parallel ishlash. Protsessorda bir nechta yadro bo'lsa, turli tablar turli yadrolarda bir vaqtda ishlashi mumkin.

Narxi ham bor: har jarayon o'z xotirasini oladi. Shuning uchun 40–50 ta tab ochiq tursa, brauzer bir necha gigabayt RAM egallashi mumkin.

Tekshirib ko'ring: Nega Chrome saytlarni bitta jarayon ichidagi oqimlarda emas, alohida jarayonlarda ochadi? (OS darsidagi jarayon va oqim farqini eslang.)

5. Tab ichidagi oqimlar

Har bir renderer jarayoni ichida bir nechta oqim (thread) ishlaydi. Ikkitasi eng muhim.

Asosiy oqim (main thread) — eng band ishchi. HTML'ni tahlil qiladi, CSS'ni hisoblaydi, JavaScript kodini bajaradi, tugma bosishlarga javob beradi. Hammasi — bitta oqimda, navbat bilan.

Kompozitor oqimi (compositor thread) — tayyor tasvir qatlamlarini ekranga yig'adi. Sahifani aylantirish (scroll) ko'pincha shu oqim hisobiga silliq bo'ladi. Buni keyingi darsda batafsil ko'ramiz.

Nega bu muhim? Asosiy oqim og'ir JavaScript bilan band bo'lsa, tugmalar bosilmay qoladi. Uzoq qotsa, Chrome "Page Unresponsive" ("Sahifa javob bermayapti") oynasini chiqaradi. Bu OS darsida ko'rgan (Not Responding) ning brauzerdagi ko'rinishi.

Diqqat: JavaScript sahifa ichida asosan bitta asosiy oqimda ishlaydi. Og'ir hisobni fon oqimiga berish usuli ham bor — Web Workers. Uni kursda keyinroq o'rganamiz, hozir bilish shart emas.

6. O'z ko'zingiz bilan: brauzer Task Manager'i

Chrome va Edge'ning o'z vazifalar menejeri bor. Uni ochib, jarayonlarni ko'ramiz.

1. Chrome'da 3–4 ta turli sayt oching.
2. Windows'da Shift + Esc ni bosing. Yoki menyu: ⋮ → More tools → Task manager.
3. macOS'da: yuqori menyu Window → Task Manager.

Ochilgan oynada har qatorda bitta jarayon turadi:

Ro'yxatda har bir tab, GPU jarayoni, tarmoq xizmati va kengaytmalar alohida qator bo'lib ko'rinadi. Bu — ko'p jarayonli modelning o'zi.

7. Ko'p uchraydigan xatolar

7.1 "Chrome'da ishladi — demak hamma joyda ishlaydi"

Sayt faqat Chrome'da tekshiriladi. Keyin foydalanuvchilar iPhone'dan shikoyat qiladi: "tugma ko'rinmayapti".

Nega: Chrome, Edge, Yandex Browser — bitta Blink oilasi. Safari va iPhone — WebKit, Firefox — Gecko.

Tuzatish: har bir dvigatel oilasidan kamida bitta brauzerda tekshiring: Chrome (Blink), Firefox (Gecko), Safari yoki iPhone (WebKit).

7.2 "Aw, Snap!" sahifasidan qo'rqish

Tab o'rnida shunday yozuv chiqadi:

Aw, Snap!
Something went wrong while displaying this webpage.
Error code: Out of Memory

Tarjimasi: "Voy! Sahifani ko'rsatishda nimadir buzildi. Xato kodi: xotira yetmadi".

Nega: shu tabning renderer jarayoni yiqildi — ko'pincha xotira tugagani uchun. Boshqa tablarga ta'sir qilmaydi: ular alohida jarayonda.

Tuzatish: sahifani qayta yuklang (F5). Tez-tez takrorlansa, keraksiz tablarni yoping. O'z saytingizda chiqsa — sahifa juda ko'p xotira yeyapti, bu dasturchi tuzatadigan muammo.

7.3 iPhone'dagi Chrome'ni Android'dagi Chrome bilan bir xil deb o'ylash

Nega xato: iPhone'dagi Chrome ichida WebKit ishlaydi, Android'dagida — Blink. Nomi bir, motori boshqa.

Tuzatish: iPhone foydalanuvchilari uchun saytni Safari'da tekshiring.

7.4 50 ta ochiq tabdan hayron bo'lish

"Kompyuterim sekinlashdi, brauzer 6 GB xotira olibdi!"

Nega: har sayt — alohida jarayon, har jarayon — o'z xotirasi. Bu xato emas, xavfsizlik va barqarorlik uchun to'lanadigan narx.

Tuzatish: keraksiz tablarni yoping. Task Manager'da eng ko'p xotira olayotgan tabni toping.

8. Mashqlar

1-mashq (oson): Dvigatelni toping

Jadvalga qarab to'ldiring:

1. Firefox'ning rendering dvigateli:
2. Chrome'ning JavaScript dvigateli:
3. Safari'ning rendering dvigateli:
4. Edge'ning rendering dvigateli:

2-mashq (o'rta): Jarayonlarni ko'ring va bittasini to'xtating

1. Chrome yoki Edge'da uchta turli sayt oching.
2. Shift + Esc bilan brauzer Task Manager'ini oching.
3. Har bir tab alohida qator bo'lib turganini va har birining o'z Process ID si borligini toping.
4. Bitta tab qatorini tanlab, End process tugmasini bosing. O'sha tabga o'ting.

3-mashq (qiyin): Test rejasini tuzing

Aziza Toshkentdagi choyxona uchun buyurtma sayti yasadi. Mijozlarning ko'pchiligi telefondan kiradi: Android va iPhone. Ofisdagi xodimlar Windows kompyuterda Edge ishlatadi.

1. Saytni kamida qaysi brauzerlarda tekshirish kerak?
2. Nega Edge'ni alohida tekshirish unchalik shart emas, Chrome'dagi tekshiruv yetarli bo'lishi mumkin?
3. iPhone'dagi Chrome'da tekshirish Safari'dagi tekshiruv o'rnini bosadimi?

9. Real ishda

• Brauzerlararo tekshiruv. Kompaniyalarda sayt chiqishidan oldin Chrome, Firefox, Safari va telefonlarda tekshiriladi. Qo'lda barcha qurilmani sotib olmaslik uchun BrowserStack kabi xizmatlar bor — ular haqiqiy telefon va brauzerlarni internet orqali ijaraga beradi.
• Xato hisobotlari. Jamoada "faqat Safari'da buziladi" degan vazifalar tez-tez uchraydi. Dvigatellar farqini bilgan dasturchi sababni tezroq topadi.
• Chromium hamma joyda. VS Code, Slack, Discord kabi kompyuter ilovalari ichida ham Chromium va Node.js ishlaydi — Electron deb ataladigan asos orqali. Uni kursda alohida o'rganmaymiz, faqat nomini eslab qoling.
• Intervyu savoli: "Brauzer qanday qismlardan iborat?", "Rendering dvigateli va JS dvigateli farqi nima?", "Chrome nega har tabni alohida jarayonda ochadi?" — frontend intervyularida ko'p so'raladi.

Xulosa

• Brauzer — bir nechta qismdan iborat dastur: interfeys, rendering dvigateli, JS dvigateli, tarmoq qismi va ma'lumot ombori.
• Uchta asosiy dvigatel oilasi bor: Blink (Chrome, Edge, Yandex Browser), Gecko (Firefox), WebKit (Safari va iPhone'dagi barcha brauzerlar).
• V8 — Chrome'ning JS dvigateli, Node.js ham shu dvigatelda ishlaydi.
• Zamonaviy brauzer har saytni alohida, sandbox ichidagi jarayonda ochadi: bitta tab qulasa, qolganlari ishlayveradi.
• Sahifadagi JavaScript asosan bitta asosiy oqimda ishlaydi — u band bo'lsa, sahifa qotadi.

Manbalar

• Inside look at modern web browser — Chrome jamoasining brauzer ichki tuzilishi haqidagi maqolalar turkumi (ingliz tilida).
• MDN: How browsers work — brauzer ishlashining umumiy sharhi.

Keyingi dars: HTML'dan pikselgacha: Critical Rendering Path — rendering dvigateli HTML va CSS'ni qaysi bosqichlar orqali ekrandagi rasmga aylantirishini qadamma-qadam ko'ramiz.