Sobes.tech
Intervyu yordami
Resurslar
Intervyuga tayyorgarlik
Resurslar
Ish qidirish
Resurslar
Huquqiy
Savollarga qaytish
Middle

Veb-sahifa qanday yuklanadi?

sobes.tech AI

AIdan javob

  1. Foydalanuvchi brauzerning manzil satridan URL ni kiritadi yoki havolaga bosadi.
  2. URL ni tahlil qilish: Brauzer URL ni protokol, domena, port va yo'lni aniqlash uchun tahlil qiladi.
  3. IP manzilini qidirish: Brauzer DNS kechimini tekshiradi, keyin operatsion tizim kechimini, keyin marshrutizator kechimini. Agar manzil lokal ravishda topilmasa, domen nomining IP manzilini olish uchun DNS serveriga so'rov yuboriladi.
  4. TCP ulanishini o'rnatish (Handshake): Brauzer olingan IP manzili yordamida (uch bosqichli qo'l berish: SYN -> SYN-ACK -> ACK) server bilan TCP ulanishini o'rnatadi.
  5. HTTP so'rovini yuborish: Brauzer talab qilinayotgan resursni (yo'l), sarlavhalar (User-Agent, Accept-Encoding, Cookie va boshqalar) va so'rov matnini (agar mavjud bo'lsa) ko'rsatadigan HTTP so'rovini yuboradi.
    GET /index.html HTTP/1.1  
Host: example.com  
User-Agent: Mozilla/5.0 ...  
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
  6. Server tomonidan so'rovni qayta ishlash: Server so'rovni oladi, uni qayta ishlaydi (masalan, server tomonidagi skriptlarni bajaradi) va HTTP javobini hosil qiladi.
  7. HTTP javobini yuborish: Server HTTP javobini brauzerga qaytaradi. Javobda holat kodi (masalan, 200 OK), sarlavhalar (Content-Type, Content-Length, Cache-Control va boshqalar) va javob matni (talab qilingan resursning mazmuni, masalan, HTML fayli) bo'ladi.
    HTTP/1.1 200 OK  
Content-Type: text/html; charset=UTF-8  
Content-Length: 12345  
Cache-Control: max-age=3600  

<!DOCTYPE html>  
<html>  
<head>...</head>  
<body>...</body>  
</html>
  8. HTML ni tahlil qilish va DOM ni yaratish: Brauzer HTML kodini qabul qilishni boshlaydi va uni tahlil qiladi, hujjat ob'ekt modeli (DOM - Document Object Model) ni xotirada yaratadi. DOM HTML elementlarining daraxtini ifodalaydi.
  9. Resurslarni yuklash va qayta ishlash: HTML tahlili davomida, brauzer boshqa resurslarga (CSS, JavaScript, rasmlar, shriftlar va boshqalar) havolalarni topadi. Har bir resurs uchun 3-7 qadamlar takrorlanadi (IP qidirish, TCP ulanishi (agar kerak bo'lsa), HTTP so'rov/ javob). Bu resurslarni yuklash parallel ravishda bo'lishi mumkin (bir vaqtning o'zida bog'lanishlar soni bilan cheklangan).
  10. CSSOM ni qurish: Brauzer CSS fayllarini va HTML ichidagi <style> bloklarini tahlil qiladi va CSS ob'ekt modeli (CSSOM - CSS Object Model) ni yaratadi. CSSOM sahifadagi elementlarga tatbiq etiladigan uslublarni ifodalaydi.
  11. Render daraxtini qurish: Brauzer DOM va CSSOM ni birlashtirib, render daraxtini (Render Tree) quradi. Render daraxti faqat ko'rinadigan elementlar va ularning uslublarini o'z ichiga oladi. display: none bo'lgan elementlar kiritilmaydi.
  12. Layout (Reflow): Brauzer render daraxti, ko'rish oynasi o'lchamlari va uslublarga asoslanib, har bir elementning aniq joylashuvi va o'lchamini hisoblaydi.
  13. Chizish (Repaint): Brauzer har bir elementni ekranda hisoblangan joylarda va qo'llanilgan uslublar bilan chizadi. Bu qatlamlarda amalga oshiriladi.
  14. Kompazitsiya: Brauzer chizilgan qatlamlarni yakuniy tasvirga birlashtiradi va foydalanuvchi ekranida ko'rsatadi.
  15. JavaScript ni bajarish: Skriptlar yuklanib, tahlil qilinayotgan paytda, JavaScript kodi bajariladi. JavaScript bajarilishi DOM va CSSOM ga ta'sir qilishi mumkin va takroriy Layout va Chizish (Reflow/Repaint) bosqichlarini chaqirishi mumkin.

Kontentni ko'rsatish uchun asosiy bosqichlar:

  • DOMContentLoaded: Bu voqea, brauzer HTML hujjatini to'liq yuklab, tahlil qilgan va DOM daraxtini yaratgan vaqtda yuzaga keladi, ammo uslublar, rasmlar va kichik ramkalarni yuklashni kutadi.
  • Load: Bu voqea, sahifa, jumladan rasmlar, skriptlar, uslublar va boshqa resurslar to'liq yuklangan vaqtda yuzaga keladi.
OldingiKeyingi