Kaip HTML paverčiama į tinklalapį?

HTML konvertavimo į tinklalapį procesas apima keletą pagrindinių etapų:

HTML analizė:
- Naršyklė skaito HTML kodą ir kuria objektų medį — DOM (Document Object Model).
- DOM vaizduoja dokumento struktūrą kaip mazgus (elementus, atributus, tekstą).
CSS analizė:
- Naršyklė skaito CSS stilius (išorinius, vidinius, inline).
- Sukuriamas stilių medis — CSSOM (CSS Object Model).
Render medžio kūrimas:
- DOM ir CSSOM sujungiami.
- Sukuriamas objektų medis, kuriame yra vizualinė informacija (kokie elementai matomi ir kaip jie turėtų atrodyti). Elementai su display: none nėra įtraukiami į Render Tree.
Išdėstymas (Layout/Reflow):
- Tiksliai apskaičiuojamos kiekvieno elemento geometrinės koordinatės ir dydžiai.
- Jei jų dydis ar padėtis keičiasi, įvyksta pertvarkymas.
Piešimas (Painting):
- Vizualiai vaizduojami pikseliai ekrane, naudojant Render Tree ir išdėstymo rezultatus.
- Atliekamas sluoksniavimas (background, border, content).
Kompozicija (Compositing):
- Skirtingi sluoksniai yra sluoksniuojami teisinga tvarka, sudarant galutinį puslapio vaizdą.

Šie etapai atliekami nuosekliai, tačiau kai kurie gali būti kartojami (pavyzdžiui, Layout ir Painting po DOM ar stilių pakeitimų).

<!-- Paprastas HTML5 dokumento pavyzdys -->
<!DOCTYPE html>
<html>
<head>
    <title>Pavyzdžio puslapis</title>
    <style>
        /* CSS stiliai pavyzdyje */
        h1 {
            color: blue;
        }
    </style>
</head>
<body>
    <h1>Sveiki, pasauli!</h1> <!-- Elementas, kuris bus pridėtas į DOM ir Render Tree -->
    <p style="display: none;">Šis tekstas yra paslėptas.</p> <!-- Elementas DOM, bet ne Render Tree -->
</body>
</html>

/* CSSOM pavyzdys HTML stiliams */
/* Atstovauja stilių struktūrą */
h1 {
    color: blue;
}

Naršyklė analizuoja HTML ir CSS, kuria vidinius modelius, apskaičiuoja elementų išsidėstymą ir juos nupiešia ekrane.