💬 Спрашивают в 3% собеседований
Отрисовка сайта для пользователя включает несколько этапов. Давайте разберём их подробнее.
1️⃣ Запрос к серверу:
Когда пользователь вводит URL-адрес в браузере и нажимает Enter, браузер отправляет HTTP-запрос к серверу, где находится сайт.
2️⃣ Ответ сервера:
Сервер получает запрос и отправляет обратно нужные файлы. Обычно это HTML-документ, стили (CSS) и скрипты (JavaScript).
3️⃣ Парсинг HTML:
Браузер начинает читать (парсить) HTML-документ. Он строит дерево DOM (Document Object Model), которое представляет структуру HTML. Каждый элемент HTML становится узлом в этом дереве.
4️⃣ Загрузка и применение CSS:
После парсинга HTML браузер загружает и применяет стили из CSS-файлов. Это позволяет создать дерево CSSOM (CSS Object Model), которое описывает, как каждый элемент должен выглядеть. Затем DOM и CSSOM объединяются, чтобы создать render tree (дерево рендеринга).
5️⃣ Загрузка и выполнение JavaScript:
Когда браузер находит теги
<script>, он загружает и выполняет JavaScript. Скрипты могут изменять DOM, что потребует обновления render tree. JavaScript может также изменять CSSOM и запрашивать новые данные с сервера (например, с помощью AJAX).6️⃣ Отрисовка (рендеринг):
На основе render tree браузер рассчитывает расположение каждого элемента (layout) и отрисовывает (paint) их на экране. Этот процесс называется layout и painting.
7️⃣ Оптимизации и обновления:
Браузеры используют различные оптимизации, такие как кэширование ресурсов, асинхронную загрузку скриптов и отложенную загрузку изображений. JavaScript и CSS могут вызывать изменения в DOM, которые требуют перерисовки (repaint) или перерасчета расположения элементов (reflow).
🤔 Пример:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Мой Сайт</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Привет, мир!</h1>
<p>Это пример простого HTML-документа.</p>
<script src="script.js"></script>
</body>
</html>
В этом примере браузер сначала загрузит HTML, создаст DOM, затем загрузит CSS и создаст CSSOM, а потом загрузит и выполнит JavaScript.
🤔 **Вкратце**: Браузер загружает HTML, CSS и JavaScript с сервера, создаёт внутренние структуры данных (DOM и CSSOM), рассчитывает расположение элементов и отрисовывает их на экране пользователя.
🔥 ТОП ВОПРОСОВ С СОБЕСОВ
🔒 База собесов | 🔒 База тестовых