Od paska adresu do pikseli: jak przeglądarka ładuje stronę internetową

Wpisanie example.com i naciśnięcie klawisza Enter wydaje się natychmiastowe, ale zanim cokolwiek pojawi się na ekranie, odbywa się kilka odrębnych kroków. Gdy dopiero zaczynasz pracować nad rozwojem stron internetowych, terminy takie jak DNS, serwer, HTML, CSS i JavaScript mogą wydawać się odrębnymi tematami. Ten artykuł łączy je w jedną sekwencję, dzięki czemu masz model mentalny, do którego możesz później dopisać kolejne tematy, od API po wydajność renderowania.

Proces ten składa się z czterech etapów: znalezienia strony, poproszenia jej o treść, otrzymania tej treści oraz przekształcenia jej w widoczną stronę.

Etap 1: Znalezienie miejsca, gdzie znajduje się strona internetowa

Ludzie identyfikują strony internetowe po nazwie. Takie nazwy są łatwe do zapamiętania:

example.com
google.com
youtube.com

Komputery w sieci adresują się jednak wzajemnie za pomocą adresów IP, czyli identyfikatorów liczbowych, takich jak 203.0.113.10 dla IPv4 lub dłuższych form szesnastkowych dla IPv6. Zanim przeglądarka może nawiązać połączenie z witryną, musi przetłumaczyć jej nazwę na adres. To właśnie jest zadaniem DNS, czyli Systemu Nazw Domen.

Dobrym sposobem na zrozumienie DNS jest lista kontaktów w telefonie. Przechowujesz i wyszukujesz osoby po nazwisku, a telefon sam znajduje dla ciebie numer. Nigdy nie musisz zapamiętywać cyfr. DNS robi to samo w przypadku sieci WWW: wpisujesz nazwę domeny, a DNS dostarcza adres maszyny, która ją serwuje.

W praktyce wyszukiwanie odbywa się w kilku warstwach i jest intensywnie cacheowane. Przeglądarka najpierw sprawdza swój własny cache, potem cache systemu operacyjnego, a dopiero wtedy zwraca się do rozwiązującego DNS, który jest zazwyczaj obsługiwany przez dostawcę internetu lub publiczną usługę DNS. Jeśli rozwiązujący nie zna już odpowiedzi, przeszukuje hierarchię DNS aż do momentu znalezienia serwerów odpowiedzialnych za dany domenę. Dzięki cache’owaniu strona, którą ostatnio odwiedziłeś, zazwyczaj rozwiązuje się niemal natychmiast.

Etap 2: Wysyłanie żądania

Mając już adres IP, przeglądarka może skontaktować się z serwerem strony: komputerem, którego zadaniem jest przechowywanie, generowanie i dostarczanie plików oraz danych potrzebnych stronie internetowej.

Zanim jakikolwiek treść internetowa zostanie przesłana, przeglądarka nawiązuje połączenie z tym serwerem. W przypadku nowoczesnej strony https:// dochodzi również do procedury TLS handshake, podczas której obie strony uzgadniają klucze szyfrowania, a przeglądarka sprawdza certyfikat serwera, aby upewnić się, że komunikuje się z prawdziwą stroną. Dopiero wtedy przeglądarka wysyła żądanie HTTP.

W drodze żądanie przechodzi przez wiele sieci i urządzeń, takich jak Twój router, sprzęt dostawcy usług oraz różne pośrednie routery, zanim dotrze do serwera. W swojej istocie żądanie mówi: „Proszę o wysłanie mi tego, co jest potrzebne do wyświetlenia tej strony”. Zawiera ono również informacje takie jak dokładna ścieżka żądanej treści, formaty obsługiwane przez przeglądarkę oraz wszystkie pliki cookie związane z tą stroną.

Etap 3: Odbieranie odpowiedzi

Serwer przetwarza żądanie i odpowiada odpowiedzią HTTP. Pierwszą odpowiedzią jest zazwyczaj dokument HTML, a ten dokument odwołuje się do dalszych zasobów, które przeglądarka następnie również żąda, w tym:

• dokumenty HTML
• pliki stylów CSS
• pliki JavaScript
• obrazy
• inne dane, takie jak czcionki lub JSON z API

Restauracja ułatwia zapamiętanie tego procesu wymiany:

• Przeglądarka to klient.
• Żądanie to zamówienie.
• Serwer to kuchnia.
• Odpowiedź to posiłek.

Zlecasz zamówienie, kuchnia go odczytuje, przygotowuje danie i je wysyła. Internet funkcjonuje według tego samego schematu: przeglądarka wysyła żądanie, serwer wykonywa pracę, a następnie przychodzi odpowiedź. Każda odpowiedź zawiera również kod stanu, np. 200 oznaczający sukces lub 404, gdy strona nie istnieje – informuje to przeglądarkę, jak postępować z otrzymanym treścią.

Etap 4: Przekształcanie plików w stronę

Mieć pliki to nie to samo, co pokazywać stronę. Przeglądarka nadal musi je zinterpretować i połączyć w to, co widzisz, a każdy z trzech podstawowych języków internetu pełni specyficzną rolę.

HTML zapewnia strukturę

HTML opisuje, co znajduje się na stronie i jak jest zorganizowane: nagłówki, akapity, przyciski, obrazy, linki i tak dalej. To szkielet strony. Przeglądarka parsuje go do DOM (Document Object Model), czyli drzewa elementów, od którego opiera się reszta procesu.

CSS kontroluje wygląd

CSS decyduje o tym, jak wygląda ta struktura: kolory, czcionki, odstępy, układ i rozmiary. Jeśli HTML to szkielet, to CSS to wszystko, co nadaje mu wizualną formę. Przeglądarka parsuje pliki stylów do swojej własnej struktury i dopasowuje każdą zasadę do elementów, do których ma zastosowanie.

JavaScript dodaje funkcjonalność

JavaScript czyni stronę interaktywną: reaguje na kliknięcia przycisków, uruchamia animacje, ładuje i aktualizuje treść bez pełnego ponownego załadowania oraz wiele innych rzeczy. Skrypty mogą czytać i zmieniać DOM oraz style, dlatego strona może ulec transformacji po pierwszym wyświetleniu.

Podsumowanie

Gdy struktura i style są połączone, przeglądarka oblicza, gdzie ma znaleźć się każdy element (rozmieszczenie), a następnie wyświetla wynik (rysowanie). Domyślnie zwykła tag <script> wstrzymuje analizę HTML, dopóki skrypt nie zostanie pobrań i uruchomiony, co jest jednym z powodów, dla których wskazówki dotyczące wydajności często zalecają użycie atrybutów defer lub async.

Kolejne etapy w porządku

Oto kolejność działań:

1. Wpisujesz adres strony internetowej.
2. DNS przekształca nazwę na adres IP.
3. Przeglądarka łączy się z serwerem i wysyła żądanie.
4. Serwer otrzymuje i przetwarza żądanie.
5. Serwer wysyła odpowiedź.
6. Przeglądarka otrzymuje HTML oraz żąda plików CSS, JavaScriptu, obrazów i innych danych, do których się odwołuje.
7. Przeglądarka analizuje i łączy te zasoby.

Skończona strona pojawia się na twoim ekranie.

Przy szybkiej łączności większość tych działań odbywa się w ułamku sekundy, dlatego wydaje się, że naciśnięcie klawisza Enter po prostu sprawia, iż strona się pokazuje.

Dlaczego ten model jest wartościowy

Znajomość tej sekwencji łączy ze sobą koncepcje, które zazwyczaj są nauczane oddzielnie: przeglądarki, DNS, serwery, HTML, CSS i JavaScript. Daje ona również miejsce na przechowywanie nowej wiedzy. Gdy później poznasz API, rozpoznasz je jako dodatkowe wymiany zapytań i odpowiedzi. Studiując pracę backendu, dowiesz się, że odbywa się ona po stronie serwera w etapie 3. Analizując wydajność frontendu, zrozumiesz, że chodzi głównie o przyspieszenie etapów 3 i 4.

Pomaga to również przy debugowaniu. Błąd „strona nie znaleziona” wskazuje na etap 1, błąd czasu oczekiwania lub połączenia – na etap 2, status 500 – na problem z serwerem w etapie 3, a strona, która się ładowa, ale wygląda niepoprawnie – na problem z CSS lub JavaScriptem w etapie 4.

Główne wnioski

• DNS mapuje łatwe do zapamiętania nazwy na adresy IP, wykorzystując buforowanie na kilku poziomach.
• Brauzer nawiązuje połączenie, zabezpieczone protokołem TLS w przypadku HTTPS, i wysyła żądanie HTTP.
• Serwer odpowiada plikiem HTML, który z kolei odwołuje się do plików CSS, JavaScriptu, obrazów oraz innych zasobów.
• HTML stanowi strukturę DOM, CSS nadaje jej styl, a JavaScript dodaje funkcjonalności, zanim browser ułoży i wyświetli stronę.
• Każdy etap zawodzi w swoisty, łatwy do rozpoznania sposób, co sprawia, że ten model jest praktycznym narzędziem do debugowania oraz pomocą w nauce.

Pozycje pokrewne

• Od skryptu stylów do ekranu: Gdzie CSS wchodzi w proces brauzera — Śledźmy los CSS od pobrania do pikseli: jak budowane są DOM, CSSOM i drzewo renderowania, gdzie odbywa się kaskada stylów oraz jakie źródła stylów konkurują o każdy element.
• Dlaczego mikrooptymalizacje nie rozwiązują prawdziwych problemów z wydajnością JavaScript — Wyjaśnia, dlaczego dążenie do mierzalnych wskaźników takich jak rozmiar pliku i liczba ponownych renderowań często pomija prawdziwe przyczyny wolnej wydajności aplikacji JavaScript.