Jak przeglądarka obsługuje stronę internetową?

Proces przetwarzania strony internetowej przez przeglądarkę można podzielić na kilka etapów:

1. Żądanie i pobranie zasobu:

   • Użytkownik wpisuje URL w pasek adresu lub klika w link.
   • Przeglądarka wysyła żądanie HTTP do serwera.
   • Serwer przetwarza żądanie i wysyła odpowiedź, zawierającą zazwyczaj dokument HTML.

2. Analiza składniowa (Parsing):

   • Przeglądarka otrzymuje dokument HTML w formie bajtów.
   • Bajty te są dekodowane na znaki zgodnie z określoną kodowaniem.
   • Parser HTML analizuje dokument znak po znaku i tworzy drzewo DOM (Document Object Model). DOM reprezentuje logiczną strukturę dokumentu.
   • Podczas wykrywania tagów <link> (dla CSS) lub <script> (dla JavaScript), przeglądarka zaczyna pobierać te zasoby równolegle z analizą HTML.

3. Budowa CSSOM:

   • Parser CSS analizuje reguły CSS z tagów <style>, <link> i stylów inline.
   • Na podstawie tych reguł buduje się drzewo CSSOM (CSS Object Model), które zawiera wszystkie style dla każdego elementu na stronie.

4. Budowa drzewa renderowania (Render Tree):

   • Render Tree łączy DOM i CSSOM. Zawiera tylko elementy, które będą wyświetlane na stronie, oraz ich style.
   • Elementy z regułą CSS display: none; nie są uwzględniane w Render Tree.

5. Układ (Layout / Reflow):

   • Przeglądarka oblicza dokładne rozmiary i pozycje każdego elementu na podstawie Render Tree. Proces ten nazywa się Layout lub Reflow.
   • Układ zachodzi przy pierwszym tworzeniu Render Tree oraz przy zmianie rozmiaru okna, dodaniu/usunięciu elementów lub zmianie ich stylów.

6. Rysowanie (Painting / Repaint):

   • Przeglądarka rysuje każdy element na ekranie, korzystając z informacji z Render Tree i wyników kroku Layout.
   • Rysowanie może również wystąpić przy zmianie widocznych właściwości elementu, takich jak kolor, tło, przezroczystość, bez zmiany jego geometrii (nazywa się to Repaint).

7. Kompozycja:

   • Elementy rysowane mogą być grupowane na różnych warstwach w celu optymalizacji renderowania i animacji.
   • Warstwy te są następnie łączone, aby wyświetlić końcową stronę na ekranie.

8. Wykonanie skryptów:

   • Gdy parser HTML osiąga tag <script>, wykonywanie analizy HTML jest wstrzymane (domyślnie), a przeglądarka pobiera, analizuje i wykonuje kod JavaScript.
   • JavaScript może modyfikować DOM i CSSOM, co może wywołać powtarzające się kroki Layout i Paint.
   • Atrybuty async i defer dla tagu <script> wpływają na kolejność i czas wykonywania skryptów, umożliwiając kontynuację analizy HTML.

Oto przybliżona wizualizacja przepływu:

Żądanie HTTP
↓
Bytes HTML
↓
Parser HTML
→ Parser CSS (w równoległości)
    ↓           ↓
    Drzewo DOM  Drzewo CSSOM
          ↓
     Drzewo renderowania
          ↓
        Layout
          ↓
       Rysowanie
          ↓
     Kompozycja
          ↓
   Wyświetlanie na ekranie

Wykonywanie JavaScript może przerywać na różnych etapach, powodując powtarzanie kroków:

Parser HTML + tag `<script>`
↓
Wstrzymanie parsowania HTML
↓
Pobranie skryptu
↓
Analiza skryptu
↓
Wykonanie skryptu
↓
(Może modyfikować DOM/CSSOM → wywołać Layout/Paint)
↓
Wznowienie parsowania HTML

Zrozumienie tego procesu jest ważne dla optymalizacji wydajności stron internetowych.