Sobes.tech
Анықтамалық сұхбат
Ресурстар
Сұхбатқа дайындық
Ресурстар
Жұмыс іздеу
Ресурстар
Заңды
Сұрақтарға оралу
Middle

Веб-бет қалай жүктеледі?

sobes.tech AI

AI-дан жауап

  1. Пайдаланушы браузердің мекенжай жолына URL енгізеді немесе сілтемеге басады.
  2. URL-ді талдау: Браузер URL-ді талдайды, протоколды, доменді, портты және жолды анықтау үшін.
  3. IP-мекенжайды іздеу: Браузер DNS кэшін, содан кейін операциялық жүйенің кэшін, содан кейін маршрутизатордың кэшін тексереді. Егер мекенжай жергілікті түрде табылмаса, домендік атаудың IP-мекенжайын алу үшін DNS-серверіне сұрау жіберіледі.
  4. TCP қосылымын орнату (Handshake): Браузер алынған IP-мекенжай бойынша сервермен TCP қосылымын орнатады (үш жақты қол алысу: SYN -> SYN-ACK -> ACK).
  5. 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 - Document Object Model) жадыда құрады. DOM HTML элементтерінің ағашын көрсетеді.
  9. Ресурстарды жүктеу және өңдеу: HTML-ді талдау кезінде браузер басқа ресурстарға сілтемелерді табады (CSS, JavaScript, суреттер, шрифтер және т.б.). Әр ресурс үшін 3-7 қадамдар орындалады (IP іздеу, TCP қосылымы (қажет болса), HTTP сұрауы/жауабы). Бұл ресурстарды жүктеу параллельді түрде жүзеге асуы мүмкін (бір уақытта бірнеше қосылымдар саны шектелген).
  10. CSSOM құру: Браузер CSS-файлдарды және HTML-дағы <style> блоктарын талдайды, CSS объектілік моделін (CSSOM - CSS Object Model) құрады. 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: Оқиға, барлық бет, соның ішінде суреттер, скрипттер, стильдер және басқа ресурстар толық жүктелген кезде іске қосылады.
АлдыңғыКелесі