Как се преобразува HTML в уеб страница?

Процесът на преобразуване на HTML в уеб страница включва няколко основни етапа:

Парсване на HTML:
- Браузърът чете HTML кода и изгражда дърво от обекти — DOM (Модел на обекта на документа).
- DOM представя структурата на документа под формата на възли (елементи, атрибути, текст).
Парсване на CSS:
- Браузърът чете CSS стиловете (външни, вътрешни, inline).
- Изгражда се дърво на стиловете — CSSOM (CSS Обектен модел).
Изграждане на дървото за рендиране (Render Tree):
- DOM и CSSOM се комбинират.
- Създава се дърво от обекти, съдържащи визуална информация (кои елементи са видими и как трябва да изглеждат). Елементите с display: none не се включват в Render Tree.
Layout (Reflow):
- Изчисляват се точните координати и размери на всеки елемент в Render Tree на екрана.
- Елементите се пренареждат, ако техните размери или позиции се променят (например при промяна на размера на прозореца или добавяне на съдържание).
Рисуване (Painting):
- Пикселите се визуално изобразяват на екрана, използвайки информацията от Render Tree и резултатите от layout.
- Рисуването се извършва на слоеве (фон, рамка, съдържание).
Композиция (Compositing):
- Различните слоеве за рендиране се наслагват в правилния ред, за да се създаде финалното изображение на страницата.

Тези етапи се изпълняват последователно, но някои от тях могат да се повтарят (например, layout и painting при промени в DOM или стилове след зареждане).

<!-- Пример за прост HTML5 документ -->
<!DOCTYPE html>
<html>
<head>
    <title>Примерна страница</title>
    <style>
        /* Примерни CSS стилове */
        h1 {
            color: blue;
        }
    </style>
</head>
<body>
    <h1>Здравей, свят!</h1> <!-- Елемент, който ще бъде добавен към DOM и Render Tree -->
    <p style="display: none;">Този текст е скрит.</p> <!-- Елемент в DOM, но не и в Render Tree -->
</body>
</html>

/* Пример за CSSOM за стиловете от HTML */
/* Представлява структурата на стиловете */
h1 {
    color: blue;
}

Браузърът анализира HTML и CSS, изгражда вътрешни модели, изчислява разположението на елементите и ги рендерира на екрана.