0Pricing
Frontend Academy · Lekcja

Przeglądarki, DNS i HTTP: cykl życia żądania

Prześledź adres URL od paska adresu przez rozpoznawanie DNS, połączenie TCP i żądanie HTTP aż do odpowiedzi serwera zwracanej przeglądarce.

Przeglądarki, DNS i HTTP: cykl życia żądania to bezpłatna lekcja Frontend Academy na CoddyKit. To lekcja 1 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Frontend Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Frontend Academy zawiera 4 lekcji w sumie.

Co się dzieje po wpisaniu adresu URL?

Za każdym razem, gdy odwiedza Pan/Pani witrynę internetową, przeglądarka rozpoczyna precyzyjną sekwencję działań. Zrozumienie tego procesu pomaga lepiej tworzyć oprogramowanie — wiadomo wtedy, co może pójść nie tak i jak przyspieszyć działanie poszczególnych etapów.

Krok 1 — Rozwiązywanie DNS

DNS (Domain Name System) to książka telefoniczna internetu. Przeglądarka pyta resolver DNS: "Jaki adres IP kryje się za example.com?". Resolver sprawdza pamięci podręczne i w razie potrzeby wysyła zapytania do autorytatywnych serwerów nazw.

# DNS lookup chain
# Browser cache → OS cache → Router cache → ISP resolver → Root NS → TLD NS → Authoritative NS

Krok 2 — Uzgadnianie połączenia TCP

Gdy znany jest już adres IP, przeglądarka otwiera połączenie TCP za pomocą trójstronnego uzgadniania: SYN → SYN-ACK → ACK. W przypadku HTTPS następuje po nim uzgadnianie TLS, podczas którego negocjowane jest szyfrowanie.

Krok 3 — Żądanie HTTP

Przeglądarka wysyła żądanie HTTP przez połączenie TCP. Zawiera ono metodę (GET, POST…), ścieżkę (/index.html), wersję HTTP oraz nagłówki, takie jak Host i Accept.

GET /index.html HTTP/1.1
Host: example.com
Accept: text/html
User-Agent: Mozilla/5.0

Krok 4 — Odpowiedź HTTP

Serwer przetwarza żądanie i odsyła odpowiedź: kod stanu (200 OK, 404 Not Found…), nagłówki odpowiedzi (Content-Type, Cache-Control) oraz treść (HTML, JSON, bajty obrazu).

HTTP/1.1 200 OK
Content-Type: text/html; charset=UTF-8
Content-Length: 1234

<!DOCTYPE html>...

HTTP/1.1 a HTTP/2 i HTTP/3

HTTP/1.1 wysyła jedno żądanie w ramach jednego połączenia. HTTP/2 umożliwia multipleksowanie wielu żądań w ramach jednego połączenia. HTTP/3 wykorzystuje QUIC (oparty na UDP), aby zmniejszyć opóźnienia, zwłaszcza w zawodnych sieciach komórkowych.

Kody stanu, które trzeba znać

2xx = powodzenie (200 OK, 201 Created). 3xx = przekierowanie (301 Moved Permanently, 304 Not Modified). 4xx = błąd po stronie klienta (400, 401, 403, 404). 5xx = błąd po stronie serwera (500, 502, 503).

HTTPS i TLS

HTTPS opakowuje HTTP w warstwę TLS (Transport Layer Security). TLS zapewnia: szyfrowanie, dzięki któremu nie można odczytać przesyłanych danych; uwierzytelnianie za pomocą certyfikatów, które potwierdza, że komunikacja rzeczywiście odbywa się z example.com; oraz integralność danych, która chroni je przed modyfikacją.

Pamięć podręczna: szybsze kolejne wizyty

Odpowiedzi mogą zawierać Cache-Control: max-age=86400, dzięki czemu przeglądarka przez jeden dzień korzysta z kopii zapisanej w pamięci podręcznej. Nagłówki ETag i Last-Modified pozwalają przeglądarce sprawdzić, czy wersja w pamięci podręcznej jest nadal aktualna.

Cache-Control: max-age=86400, immutable
ETag: "abc123"
Last-Modified: Wed, 01 Jan 2025 00:00:00 GMT

Pliki cookie i sesje

Serwery ustawiają pliki cookie za pomocą nagłówka Set-Cookie. Przeglądarka automatycznie odsyła je przy każdym żądaniu do tej samej domeny. Sesje zwykle opierają się na pliku cookie zawierającym identyfikator sesji, który serwer przyporządkowuje do danych użytkownika.

CDN — sieci dostarczania treści

CDN przechowuje kopie zasobów w centrach danych na całym świecie. Użytkownicy pobierają je z najbliższego węzła, co zmniejsza opóźnienia. Cloudflare, Fastly i AWS CloudFront to popularne CDN-y używane przez większość dużych witryn internetowych.

Szybki test

Za pomocą której metody HTTP wysyła się do serwera żądanie strony internetowej?

Podsumowanie: pełny cykl obsługi żądania

Wpisanie adresu URL → DNS rozwiązuje domenę na adres IP → ustanowienie połączenia TCP (+ TLS) → przeglądarka wysyła żądanie HTTP → serwer odpowiada stanem, nagłówkami i treścią → przeglądarka renderuje odpowiedź. Każdy etap można obserwować w panelu Network narzędzi DevTools.

Często zadawane pytania

Czy lekcja „Przeglądarki, DNS i HTTP: cykl życia żądania” jest bezpłatna?

Tak — pełny tekst „Przeglądarki, DNS i HTTP: cykl życia żądania” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Frontend Academy, przejdź na CoddyKit PRO. Kurs Frontend Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „Przeglądarki, DNS i HTTP: cykl życia żądania”?

Prześledź adres URL od paska adresu przez rozpoznawanie DNS, połączenie TCP i żądanie HTTP aż do odpowiedzi serwera zwracanej przeglądarce. Ćwiczysz Frontend Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć Frontend Academy?

Nie wymagamy żadnego doświadczenia. Frontend Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 1 z 4.

Ile czasu zajmuje lekcja „Przeglądarki, DNS i HTTP: cykl życia żądania”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji Frontend Academy?

Tak. Każda lekcja Frontend Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

  1. Przeglądarki, DNS i HTTP: cykl życia żądania
  2. HTML, CSS i JavaScript: zadania poszczególnych warstw
  3. Jak renderuje się strona: parsowanie, DOM, CSSOM, układ i malowanie
  4. Narzędzia deweloperskie: otwieranie i korzystanie z DevTools
← Powrót do Frontend Academy