Из чего состоит веб-страница с точки зрения загружаемого контента?

С точки зрения браузера, загружаемая веб-страница — это набор ресурсов:

1. Основной документ (HTML) — корневой файл, который браузер запрашивает первым. Он содержит разметку и ссылки на все остальные ресурсы.
2. Стили (CSS) — могут быть встроены (<style>), подключены как внешние файлы (<link rel="stylesheet">) или импортированы динамически.
3. Скрипты (JavaScript) — могут быть встроены (<script>...</script>), внешними (<script src="...">) или загружены как модули (type="module").
4. Медиафайлы — изображения (<img src="...">), видео (<video>), аудио (<audio>), шрифты (через @font-face в CSS).
5. Метаданные и прочие ресурсы — фавиконки, манифесты (PWA), данные для SEO в тегах <meta>.

Ключевой процесс: рендеринг. Браузер загружает HTML, парсит его, строит DOM (Document Object Model). Затем загружает и применяет CSS, формируя CSSOM. После этого объединяет DOM и CSSOM в Render Tree, вычисляет макет (Layout) и отрисовывает пиксели (Paint).

Пример того, как браузер "видит" страницу:

Запрос: GET /index.html
Ответ: HTML с тегами <link>, <script>, <img>
→ Парсинг HTML, новые запросы на CSS, JS, изображения
→ Построение DOM/CSSOM/Render Tree
→ Отображение на экране

Для тестирования важно понимать этот поток, так как проблемы с загрузкой или порядком выполнения ресурсов — частый источник дефектов (например, скрипт пытается обратиться к элементу DOM, который ещё не загружен).