Jak działa przeglądarka internetowa na komputerze?

Przeglądarka nie jest tym samym co wyszukiwarka. Google Chrome, Mozilla Firefox, Microsoft Edge i Safari są programami obsługującymi strony. Google jest natomiast usługą wyszukującą informacje. Pasek adresu może pełnić obie funkcje, ponieważ rozpoznaje zarówno adresy URL, jak i zwykłe zapytania. Szerszy opis zależności między serwerem, siecią i urządzeniem zawiera materiał o tym, jak działa internet i dlaczego strony ładują się w kilka sekund.

Szybkość otwierania witryny zależy nie tylko od łącza, lecz także od czasu odpowiedzi serwera, liczby pobieranych plików, kodu JavaScript, pamięci podręcznej oraz wydajności komputera. Dwie strony otwierane przez tę samą sieć mogą więc działać zupełnie inaczej.

SPIS TREŚCI:

• Adres URL i system DNS rozpoczynają otwieranie strony
• HTTPS, TLS i HTTP odpowiadają za wymianę danych
• HTML, CSS i silnik renderujący budują widok strony
• JavaScript, V8 i SpiderMonkey uruchamiają funkcje witryny
• Chromium, Firefox i mechanizmy izolacji chronią komputer
• Pamięć podręczna, pliki cookie i magazyny przeglądarki
• Wi-Fi, serwer i kod strony wpływają na szybkość działania
• Blink, Gecko i WebKit różnią najpopularniejsze przeglądarki
• FAQ

Adres URL i system DNS rozpoczynają otwieranie strony

Proces zaczyna się po wpisaniu adresu i naciśnięciu klawisza Enter. Przeglądarka analizuje adres URL. Rozpoznaje nazwę protokołu, domenę, ścieżkę do zasobu oraz ewentualne parametry zapytania. Fragment adresu umieszczony po znaku kratki jest zwykle obsługiwany lokalnie i nie trafia w żądaniu HTTP do serwera.

Program sprawdza też, czy potrzebne dane nie znajdują się już w pamięci podręcznej. Jeżeli ważna kopia zasobu jest dostępna lokalnie, ponowne pobieranie może nie być konieczne. W przeciwnym razie przeglądarka musi ustalić adres IP serwera.

Nazwa domenowa jest wygodna dla człowieka, ale połączenie sieciowe wymaga adresu IP. Za tłumaczenie nazwy domeny odpowiada system DNS. Wynik może być przechowywany między innymi przez przeglądarkę, system operacyjny lub używany resolver DNS. Brak aktualnego wpisu oznacza konieczność wykonania zapytania.

DNS wskazuje adres serwera, lecz nie przesyła samej strony internetowej. Dopiero po uzyskaniu adresu IP komputer może rozpocząć nawiązywanie połączenia z odpowiednim hostem.

Wpisanie zwykłego hasła zamiast pełnego adresu prowadzi zazwyczaj do wyszukiwarki ustawionej w programie. Mechanizm wybierania i porządkowania rezultatów opisuje osobny materiał o tym, jak działa wyszukiwarka Google i skąd bierze wyniki.

HTTPS, TLS i HTTP odpowiadają za wymianę danych

Większość współczesnych witryn korzysta z HTTPS. Przed wysłaniem właściwego żądania przeglądarka i serwer uzgadniają parametry chronionego połączenia TLS. Program sprawdza certyfikat przedstawiony przez serwer. Certyfikat powinien pasować do domeny i pochodzić z zaufanego łańcucha certyfikacji.

HTTPS szyfruje transmisję między przeglądarką a serwerem i utrudnia osobom postronnym odczytanie lub zmianę przesyłanych danych. Kłódka nie potwierdza jednak prawdziwości każdej informacji umieszczonej na witrynie. Informuje przede wszystkim o zabezpieczeniu połączenia z daną domeną.

Po nawiązaniu połączenia program wysyła żądanie HTTP. Zwykle zawiera ono metodę, ścieżkę zasobu i nagłówki. Nagłówki mogą przekazywać obsługiwane formaty, ustawienia językowe, dane dotyczące pamięci podręcznej oraz pliki cookie właściwe dla domeny.

Serwer odpowiada kodem stanu, nagłówkami i treścią. Kod 200 oznacza poprawną odpowiedź. Kody 301 i 302 informują o przekierowaniu. Kod 404 wskazuje, że zasobu nie znaleziono. Kod 500 sygnalizuje błąd po stronie serwera. Po przekierowaniu przeglądarka analizuje nowy adres i wykonuje kolejne żądanie.

Dane nie muszą dotrzeć jako jeden duży blok. Są przesyłane przez sieć w mniejszych porcjach, a stos sieciowy komputera składa je w odpowiednią kolejność. Przeglądarka może rozpocząć analizowanie dokumentu jeszcze przed odebraniem całej odpowiedzi.

HTML, CSS i silnik renderujący budują widok strony

Dokument HTML opisuje strukturę treści. Zawiera nagłówki, akapity, odsyłacze, formularze oraz informacje o dodatkowych plikach. Parser HTML odczytuje kolejne elementy i tworzy DOM, czyli obiektową reprezentację dokumentu przechowywaną w pamięci.

DOM ma strukturę drzewa. Poszczególne elementy stają się węzłami powiązanymi relacjami nadrzędnymi i podrzędnymi. Dzięki temu skrypt może później znaleźć konkretny akapit, zmienić jego treść albo dodać nowy element bez ponownego pobierania całej strony.

Arkusze CSS określają wygląd elementów. Przeglądarka analizuje reguły i tworzy model CSSOM. Następnie łączy potrzebne informacje z DOM, aby ustalić, które elementy są widoczne i jakie mają właściwości.

Gotowy ekran powstaje w kilku operacjach obejmujących budowę drzewa renderowania, obliczenie położenia elementów, rysowanie oraz składanie warstw. Zmiana rozmiaru okna może wymusić ponowne obliczenie układu. Zmiana koloru częściej wymaga ponownego malowania, ale nie zawsze zmienia wymiary elementów.

Przeglądarka pobiera między innymi następujące zasoby:

• arkusze CSS określające układ, kolory i typografię,
• skrypty JavaScript obsługujące funkcje strony,
• obrazy w formatach takich jak JPEG, PNG, SVG i WebP,
• pliki czcionek używane do wyświetlania tekstu,
• nagrania dźwiękowe i materiały wideo,
• dane pobierane przez aplikację już po otwarciu widoku.

CSS może blokować pierwsze renderowanie, ponieważ program potrzebuje reguł stylów do poprawnego narysowania strony. Skrypt uruchomiony w niewłaściwym momencie także może zatrzymać analizę dokumentu. Znaczenie mają więc nie tylko rozmiary plików, ale również kolejność ich pobierania i wykonywania.

Silnik sprawdza też wymiary okna, powiększenie strony i możliwości urządzenia. Na tej podstawie stosuje odpowiednie reguły responsywne. Ta sama witryna może dzięki temu otrzymać inny układ na szerokim monitorze i na małym ekranie.

JavaScript, V8 i SpiderMonkey uruchamiają funkcje witryny

JavaScript odpowiada za znaczną część interakcji. Skrypt może reagować na kliknięcie, sprawdzać formularz, zmieniać zawartość DOM, pobierać dane oraz aktualizować część widoku bez pełnego przeładowania dokumentu. Nie każda strona wymaga jednak rozbudowanego kodu.

Sam tekst skryptu musi zostać przeanalizowany i wykonany przez silnik JavaScript. Google Chrome korzysta z V8. Mozilla Firefox rozwija SpiderMonkey. Silniki mogą interpretować kod i kompilować często wykonywane fragmenty do postaci lepiej dopasowanej do procesora.

Duża liczba skryptów może obciążyć procesor nawet wtedy, gdy wszystkie pliki zostały już pobrane. Skutkiem bywa opóźniona reakcja na kliknięcie, nierówne przewijanie albo szybkie zużywanie pamięci. Szybkie łącze nie usuwa takiego problemu.

JavaScript działa w środowisku kontrolowanym przez przeglądarkę. Kod strony nie powinien otrzymywać swobodnego dostępu do plików komputera ani innych programów. Dostęp do wybranych funkcji, takich jak kamera, mikrofon lub lokalizacja, podlega interfejsom przeglądarki i zazwyczaj wymaga zgody użytkownika.

Skrypty mogą wysyłać dodatkowe zapytania do serwera. Zasada tego samego pochodzenia ogranicza bezpośrednią współpracę między witrynami należącymi do różnych źródeł. Mechanizm CORS pozwala serwerowi wskazać za pomocą nagłówków, które operacje między źródłami są dozwolone.

Chromium, Firefox i mechanizmy izolacji chronią komputer

Nowoczesna przeglądarka nie musi działać jako jeden proces systemowy. Zależnie od programu i konfiguracji osobne procesy mogą obsługiwać interfejs, renderowanie stron, sieć, grafikę oraz zadania pomocnicze. Dokładna architektura zmienia się wraz z wersją i systemem operacyjnym.

Rozdzielenie procesów zwiększa stabilność. Awaria jednego modułu nie zawsze zamyka cały program. Liczba procesów widocznych w Menedżerze zadań może być większa niż liczba kart. Nie oznacza to automatycznie błędu ani infekcji.

Chromium wykorzystuje piaskownicę i izolację witryn, aby ograniczać możliwości procesu renderującego. Firefox również stosuje procesy oraz mechanizmy separacji. Ich zadaniem jest zmniejszenie skutków błędu w silniku i utrudnienie stronie dostępu do danych należących do innej witryny.

Ochronę uzupełniają zasady sieciowe i nagłówki bezpieczeństwa. Content Security Policy pozwala właścicielowi strony ograniczyć źródła skryptów, obrazów i innych zasobów. HSTS informuje przeglądarkę, że z daną domeną należy łączyć się wyłącznie przez HTTPS.

Znaczenie mają także rozszerzenia. Dodatek może zmieniać zawartość stron i uzyskiwać szerokie uprawnienia, jeżeli użytkownik je zaakceptuje. Warto pozostawiać tylko potrzebne rozszerzenia, kontrolować ich uprawnienia oraz instalować je z oficjalnego katalogu właściwego dla przeglądarki.

• Aktualizacje usuwają znane błędy w silniku i bibliotekach programu.
• Piaskownica ogranicza możliwości kodu działającego w procesie renderującym.
• Izolacja witryn oddziela dane pochodzące z różnych serwisów.
• Zasada tego samego pochodzenia ogranicza dostęp skryptów do cudzych danych.
• Uprawnienia kontrolują dostęp witryn do kamery, mikrofonu i lokalizacji.
• Filtry reputacyjne mogą ostrzegać przed rozpoznanymi niebezpiecznymi stronami.

Pamięć podręczna, pliki cookie i magazyny przeglądarki

Pamięć podręczna przechowuje lokalne kopie odpowiedzi i zasobów. Przy kolejnym wejściu program może wykorzystać zapisany plik albo zapytać serwer, czy kopia nadal jest aktualna. Zmniejsza to ilość przesyłanych danych i często przyspiesza ponowne otwarcie witryny.

Pliki cookie mają inne zadanie. Są to niewielkie dane powiązane z domeną. Mogą przechowywać identyfikator sesji, ustawienia językowe lub inne informacje potrzebne serwisowi. Atrybuty Secure, HttpOnly i SameSite ograniczają sposób przesyłania lub udostępniania danego pliku.

Witryny mogą korzystać również z magazynu lokalnego, magazynu sesyjnego i baz danych dostępnych przez interfejsy przeglądarki. Mechanizmy te nie są tym samym co pamięć podręczna. Usunięcie plików tymczasowych nie zawsze usuwa wszystkie dane witryny, a skasowanie danych logowania może zakończyć aktywną sesję.

Wyczyszczenie pamięci podręcznej bywa pomocne przy nieaktualnym wyglądzie strony, natomiast usunięcie plików cookie może wylogować użytkownika i skasować część ustawień serwisu. Obie czynności rozwiązują inne rodzaje problemów.

Tryb prywatny ogranicza zapisywanie części danych po zakończeniu sesji. Nie zapewnia jednak anonimowości wobec odwiedzanych serwisów, administratora sieci ani dostawcy internetu. Strona nadal otrzymuje informacje potrzebne do nawiązania połączenia.

Wi-Fi, serwer i kod strony wpływają na szybkość działania

Wolne otwieranie witryny nie wskazuje od razu na usterkę przeglądarki. Opóźnienie może powstać na etapie DNS, połączenia z serwerem, pobierania plików albo wykonywania skryptów. Przyczyną może być również zajęty procesor, mała ilość wolnej pamięci operacyjnej lub przeciążone rozszerzenie.

Sieć bezprzewodowa jest tylko jednym z elementów. Na jej działanie wpływają odległość od routera, przeszkody, zakłócenia i wykorzystywany standard. Różnice między generacjami sieci domowej wyjaśnia porównanie Wi-Fi 5 i Wi-Fi 6 oraz przyczyn wolnego internetu.

Jeżeli jedna strona działa wolno, a pozostałe otwierają się prawidłowo, źródłem kłopotu może być konkretny serwer lub kod serwisu. Gdy problem dotyczy wszystkich witryn, należy sprawdzić połączenie, komputer i ustawienia programu. Porównanie zachowania w innym programie pomaga oddzielić błąd strony od problemu danej przeglądarki.

1. Otwórz kilka niezależnych stron i sprawdź, czy problem dotyczy jednej domeny.
2. Odśwież witrynę i zweryfikuj, czy połączenie z internetem jest stabilne.
3. Uruchom stronę w oknie prywatnym, aby ograniczyć wpływ zapisanej sesji i części dodatków.
4. Wyłącz zbędne rozszerzenia i ponownie sprawdź działanie witryny.
5. Usuń dane tylko dla problematycznej strony, jeżeli wyświetla nieaktualną zawartość.
6. Zaktualizuj przeglądarkę oraz system operacyjny.
7. Porównaj zachowanie strony w drugim programie korzystającym z innego profilu.
8. Sprawdź obciążenie procesora i pamięci w systemowym menedżerze zadań.

Narzędzia deweloperskie dostępne w popularnych przeglądarkach pokazują żądania, rozmiary plików, kody odpowiedzi i czas wykonania skryptów. Zakładka sieciowa pozwala ustalić, czy długo oczekiwano na serwer, czy więcej czasu zajęło pobieranie dużych zasobów. Narzędzia wydajnościowe pomagają wykryć długie zadania JavaScript oraz kosztowne operacje renderowania.

Blink, Gecko i WebKit różnią najpopularniejsze przeglądarki

Silnik renderujący interpretuje standardy internetowe i tworzy widok strony. Google Chrome korzysta z Blink oraz V8. Microsoft Edge jest oparty na projekcie Chromium i również używa technologii Blink oraz V8. Firefox wykorzystuje Gecko i SpiderMonkey. Safari bazuje na WebKit i silniku JavaScriptCore.

Wspólne standardy sprawiają, że ta sama witryna powinna wyglądać podobnie w różnych programach. Różnice mogą jednak wynikać z tempa wdrażania nowych funkcji, sposobu optymalizacji, obsługi grafiki, polityki prywatności oraz współpracy z systemem operacyjnym.

Sam silnik nie przesądza o szybkości całego programu. Znaczenie mają otwarte karty, dodatki, ustawienia ochrony, dostępna pamięć i rodzaj wykonywanego zadania. Praktyczne różnice przedstawia porównanie Google Chrome i Microsoft Edge pod względem szybkości działania.

Przeglądarka jest jednocześnie klientem sieciowym, środowiskiem uruchamiania kodu, silnikiem graficznym i warstwą zabezpieczeń. Widoczna karta stanowi wynik współpracy wielu modułów. Każdy z nich odpowiada za inny etap między wpisaniem adresu a możliwością kliknięcia elementu strony.

Najważniejsze informacje do zapamiętania

• Przeglądarka i wyszukiwarka pełnią różne funkcje.
• DNS tłumaczy nazwę domeny na adres IP serwera.
• HTTPS chroni transmisję za pomocą TLS.
• HTML tworzy strukturę dokumentu, a CSS określa jego wygląd.
• DOM i CSSOM są wewnętrznymi modelami używanymi podczas renderowania.
• JavaScript obsługuje interakcje i dynamiczne zmiany treści.
• Pamięć podręczna może ograniczyć ponowne pobieranie zasobów.
• Pliki cookie mogą przechowywać identyfikator sesji i ustawienia.
• Piaskownica oraz izolacja witryn ograniczają skutki błędów.
• Wolna strona nie zawsze oznacza wolne połączenie internetowe.

Źródła informacji: MDN Web Docs, WHATWG HTML Living Standard, World Wide Web Consortium, dokumentacja Chromium, dokumentacja projektu V8, Mozilla Source Docs, dokumentacja SpiderMonkey oraz WebKit.