Sobes.tech
Интервью Жардам
Ресурстар
Интервьюга даярдоо
Ресурстар
Жумуш издөө
Ресурстар
Юридикалык
Суроолорго кайтуу
Middle

Веб-барак кантип жүктөлөт?

sobes.tech AI

AIден жооп

  1. Колдонуучу браузердин дарекчо саптынь URL жазат же шилтемеге басат.
  2. URL-дин парсинг: Браузер URL-ди анализ кылат, протоколду, доменди, портту жана жолду аныктайт.
  3. IP дарегин издөө: Браузер DNS кэшти, андан соң иштетүү системасынын кэшин, акырында маршрутизатор кэшин текшерет. Эгер дарек жергиликтүү табылбаса, домен атынын IP дарегин алуу үчүн DNS серверине суроо жөнөтөт.
  4. TCP байланышын түзүү (Handshake): Браузер TCP байланышын түзөт сервер менен алынган IP дареги боюнча (үч тараптуу кол алмашуу: SYN -> SYN-ACK -> ACK).
  5. HTTP суроо жөнөтүү: Браузер HTTP суроосун (көбүнчө GET) серверге жөнөтөт, талап кылынган ресурсты (жол), башталыштарды (User-Agent, Accept-Encoding, Cookie жана башка) жана суроо денесин (эгер бар болсо) көрсөтүү менен.
    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. Сервер тарабынан суроонун иштетилиши: Сервер суроону алат, иштетет (мисалы, сервер тараптагы скрипттерди ишке ашырат) жана HTTP жооп түзөт.
  7. HTTP жоопту жөнөтүү: Сервер HTTP жоопту браузерге кайтарат. Жооп статус кодун (мисалы, 200 OK), башталыштарды (Content-Type, Content-Length, Cache-Control жана башка) жана жооптун денесин (суроо алынган ресурстун мазмуну, мисалы, HTML файл) камтыйт.
    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 парсинг жана DOM түзүү: Браузер HTML кодду алат жана аны анализдеп, документтин объекттик моделин (DOM) эс тутумда түзөт. DOM HTML элементтеринин дарагын көрсөтөт.
  9. Ресурстарды жүктөө жана иштетүү: HTML парсинг учурунда, браузер башка ресурстарга (CSS, JavaScript, сүрөттөр, шрифттер жана башка) шилтемелерди кездештирет. Ар бир ресурс үчүн 3-7 кадамдар кайталанат (IP издөө, TCP байланышы, HTTP суроо/жооп). Бул ресурстарды жүктөө параллелдүү болушу мүмкүн (бир убакта байланыштардын санын чектөө менен).
  10. CSSOM түзүү: Браузер CSS файлдарын жана HTMLдеги <style> блокторун анализдеп, CSS объекттик моделин (CSSOM) түзөт. CSSOM сайтка колдонулган стилилерди көрсөтөт.
  11. Render Tree түзүү: Браузер DOM жана CSSOMду бириктирип, рендер дарагын (Render Tree) түзөт. Render Tree гана көрүнүүчү элементтерди жана алардын стилилерин камтыйт. display: none менен белгиленген элементтер киргизилбейт.
  12. Layout (Reflow): Браузер ар бир элементтин так жайгашуусун жана өлчөмүн эсептейт, негизинен Render Tree, терезе өлчөмү жана стилилерге негизделген.
  13. Painting (Repaint): Браузер ар бир элементти экранда сүрөттөйт, эсептелген жайгашууларда жана колдонулган стилилер менен. Бул катмектерде болот.
  14. Компоненттерди бириктирүү: Браузер сүрөттөлгөн катмектерди бириктирип, акыркы сүрөттү түзөт, ал колдучунун экранында көрсөтүлөт.
  15. JavaScript иштетүү: Жүктөө жана анализдөө учурунда, JavaScript код ишке ашырылат. JavaScript иштетүү DOM жана CSSOMго таасир этиши мүмкүн жана кайрадан Layout жана Painting кадамдарын (Reflow/Repaint) чакырат.

Мазмунду көрсөтүүнүн негизги этаптары:

  • DOMContentLoaded: Бул окуя, браузер HTML документти толугу менен жүктөп, анализдеп, DOM дарагын түзгөндө болот, бирок стилдердин таблицалары, сүрөттөр жана ички рамкалар жүктөлө турганча күтөт.
  • Load: Бул окуя, баракчаны толугу менен жүктөгөндө болот, анын ичинде сүрөттөр, скрипттер, стили жана башка ресурстар.
МурункуКийинки